Хук 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>])

Приклад 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. Ви можете переконатися у цій поведінці, спостерігаючи відповідні логи у консолі.