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

Синтаксис:

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

useEffect(setup, dependencies)

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

useEffect(() => {
  // Something that we need to do
  // after the component is rendered or updated
}, [<optional_dependencies>])

Примітка

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

Приклад 1:

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

import { useEffect, useState } from "react";
import fetchData from "../service/api";

const Articles = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetchData()
      .then((resp) => {
        setArticles(resp.jokes);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    // Render some markup based on the articles data
  );
};

У цьому компоненті ми використовуємо хук 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.

import React, { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Count has changed:", count);
  }, [count]);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

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

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

Повний код застосунку:

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