React Хуки та Контекст Підсумок Розділу

Хук useState

• Хук useState використовується для додавання функціональності станів.
• Він дозволяє оголошувати змінні стану та керувати ними всередині компонента.
• Викликаючи хук useState, ми можемо ініціалізувати змінну стану та відповідну функцію.
• Оновлення змінної стану викликає повторний рендеринг компонента, що відображає нове значення стану.

Хук useRef

• Хук useRef надає можливість створювати змінні, які зберігаються у всіх рендерах компонента.
• На відміну від useState, useRef не викликає перерендеринг при зміні її значення.
• Він зазвичай використовується для доступу або зберігання посилань на DOM-елементи, керування попередніми значеннями або збереження значень між рендерами.

Хук useEffect

• Хук useEffect дозволяє нам створювати побічні ефекти.
• Ми можемо використовувати useEffect для вирішення таких завдань, як отримання даних, підписка або взаємодія з DOM.
• Вказуючи залежності, ми можемо контролювати запуск ефекту, оптимізуючи продуктивність і запобігаючи непотрібним повторним рендерингам.

Хук useMemo

• Хук useMemo дозволяє запам'ятовувати дорогі обчислення або розрахунки.
• Він отримує функцію та масив залежностей і повертає запам'ятовуване значення.
• Надання масиву залежностей гарантує, що запам'ятовуване значення буде переобчислюватися тільки тоді, коли змінюються залежності. Ця оптимізація може значно покращити продуктивність, уникаючи непотрібних перерахунків.

Контекст

• Контекст дозволяє передавати дані по дереву компонентів, не вимагаючи явного свердління пропсів.
• Він дає змогу керувати глобальним станом і дозволяє компонентам отримувати доступ до спільних даних.
• Контекст складається з двох основних частин: об'єкта контексту та надавача контексту.
• Об'єкт Context містить спільні дані, тоді як компонент Provider обгортає ту частину дерева компонентів, яка потребує доступу до цих даних.
• Компоненти-споживачі можуть отримати доступ до даних за допомогою хука useContext.

Хук useRef

• Хук useRef надає можливість створювати змінні, які можна змінювати й які зберігаються між рендерами компонентів;
• На відміну від useState, useRef не ініціює повторний рендер при зміні його значення;
• Його зазвичай використовують для доступу чи зберігання посилань на DOM-елементи, управління попередніми значеннями або збереження даних між рендерами.

Хук useEffect

• Хук useEffect дозволяє нам виконувати побічні ефекти;
• Ми можемо використовувати useEffect для вирішення завдань таких як отримання даних, підписки або взаємодія з DOM;
• Вказуючи залежності, ми контролюємо, коли ефект виконується, оптимізуючи продуктивність і запобігаючи непотрібним повторним відображенням.

Хук useMemo

• Хук useMemo дозволяє мемоізувати витратні обчислення або розрахунки;
• Він приймає функцію та масив залежностей і повертає мемоізоване значення;
• Надання масиву залежностей гарантує, що мемоізоване значення перераховується лише тоді, коли змінюються залежності. Така оптимізація може суттєво підвищити продуктивність, уникаючи непотрібних перерахунків.

Контекст

• Контекст дозволяє передавати дані через дерево компонентів без необхідності явної передачі пропсів;
• Він уможливлює управління глобальним станом та дозволяє компонентам отримувати доступ до спільних даних;
• Контекст складається з двох основних частин: Об'єкт Контексту та Провайдер Контексту;
• Об'єкт Контексту зберігає спільні дані, тоді як компонент Провайдер охоплює частину дерева компонентів, яким потрібен доступ до цих даних;
• Компоненти-споживачі можуть отримати доступ до даних, використовуючи хук useContext.