Обробка Побічних Ефектів за Допомогою useEffect

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