useEffect Хук

Хук useEffect дозволяє синхронізувати компонент із зовнішніми факторами/сервісами, включаючи отримання даних, підписки, ручні зміни тощо.

Синтаксис:

Перший аргумент (setup) - це стрілочна функція, яка буде виконуватися після кожного рендеру. Другий аргумент (dependencies) - це необов'язковий масив залежностей. Якщо вказати dependencies, ефект буде повторно виконано лише у тому випадку, якщо одна з залежностей змінилася з моменту останнього рендеру. Якщо масив залежностей не вказано, ефект буде виконуватися після кожного рендеру.

Оскільки ми знаємо, що setup має бути стрілочною функцією, а dependencies - масивом, ми отримаємо наступний запис хука useEffect.

Примітка

Компоненти React часто покладаються на комбінацію хуків useEffect та useState. Ці хуки працюють разом, щоб керувати станом та побічними ефектами всередині компонентів.

Приклад 1:

Створімо компонент Articles, який буде використовувати хук useEffect для присвоєння даних стану articles. Це чудова можливість дослідити потужну комбінацію хуків React.

У цьому компоненті ми використовуємо хук useEffect, щоб гарантувати, що стан articles буде заповнений даними. Як згадувалося раніше, функція useEffect виконується після кожного рендеру, гарантуючи, що дані будуть показані користувачеві, якщо їх буде отримано. Це забезпечує безперебійну роботу користувача з актуальним контентом.

Пояснення по рядках:

• Рядок 1: Імпортуємо хуки useEffect та useState з бібліотеки React, щоб використати її функціональність.
• Рядок 2: Імпортуємо функцію fetchData з "../service/api". Ця функція відповідає за створення запиту до API та отримання даних.
• Рядок 4: Компонент Articles визначається за допомогою звичайного синтаксису функцій.
• Рядок 5: Ми ініціалізуємо стан за допомогою хука useState, що представляє початкове значення змінної articles. У цьому прикладі це порожній масив.
• Рядки 7-15: Реальний варіант використання хука useEffect.
  • Рядок 7 і 15: це синтаксис. Це те, як ми будемо його використовувати.
  • Рядок 8: викликається функція fetchData. Очікується, що ця функція зробить запит до API і поверне проміс.
  • Рядки 9-11: Коли проміс виконаний (блок then), вона отримує об'єкт resp. Дані витягуються з resp за допомогою resp.jokes, який переводиться в стан articles за допомогою setArticles.
  • Рядки 12-14: Якщо під час виконання запиту до API (у блоці catch) виникла помилка, вона виводиться в консоль за допомогою console.error.
• Рядки 17-19: Виводиться розмітка компонента.

Повний код програми:

Приклад 2:

Створимо компонент Counter для відстеження значення змінної counter. Завдання полягає в тому, щоб записувати значення змінної counter при кожній її зміні. Для цього використаємо хук useEffect з масивом залежностей, що складається зі змінної counter.

Пояснення по рядках:

• Рядок 1: Імпортуємо хуки useEffect та useState з бібліотеки React, щоб використати їх функціональність.
• Рядок 3: Звичайний синтаксис функції визначає компонент "Counter".
• Рядок 4: Ми ініціалізуємо стан за допомогою хука useState, що представляє початкове значення змінної count. У цьому прикладі це 0.
• Рядки 6-8: Фактичний варіант використання хука useEffect.
  • Рядок 7: ця логіка спрацьовує щоразу, коли змінюється значення в масиві залежностей. У даному випадку це змінна count.
  • Рядок 8: масив залежностей. Ми повідомляємо React, що при зміні значення змінної count потрібно виконати код всередині функції хука useEffect
• Рядки 14-19: Відображається розмітка компонента.

Повний код програми:

Будь ласка, подивіться на консоль і поспостерігайте за логікою виконання функції всередині хука useEffect. Функція спочатку виконується при початковому рендері, а потім викликається знову щоразу, коли змінюється значення змінної counter. Ви можете переконатися в такій поведінці, переглянувши відповідні логи в консолі.