Як працює useEffect у React?

useEffect — це хук у React, який дозволяє виконувати побічні ефекти у функціональних компонентх. Побічні ефекти можуть включати операції, такі як запити до сервера, підписки на події, маніпуляції з DOM та багато іншого.

Як працює useEffect?

useEffect виконується після рендерингу компонент. Він дозволяє виконувати дії, які не повинні блокувати рендеринг, такі як асинхронні запити або оновлення, які повинні відбутися після рендерингу.

Основний синтаксис

jsx

useEffect(() => {
  // Код побічного ефекту
}, [dependencies]);

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

Приклад використання useEffect

jsx

import { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  // Запустити таймер, коли компонент монтується
  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    // Очищення ефекту, коли компонент демонтується
    return () => clearInterval(intervalId);
  }, []); // Порожній масив — ефект виконається лише один раз

  return (
    <div>
      <p>Час пройшов: {seconds} секунд</p>
    </div>
  );
}

Коли виконується useEffect?

Після першого рендерингу. Якщо немає залежностей або масив порожній, ефект виконається один раз після монтування компонент.
Після кожного рендерингу, якщо залежності передані в масив. Хук буде виконуватись щоразу, коли стан або пропси, вказані в масиві залежностей, змінюються.
Для очищення ефекту. Функція, що повертається з useEffect, використовується для очищення ефекту, наприклад, скасування підписок або таймерів.

Приклад з залежностями

jsx

import { useState, useEffect } from "react";

function FetchData() {
  const [data, setData] = useState(null);
  const [url, setUrl] = useState("https://api.example.com/data");

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, [url]); // Хук спрацює, коли `url` зміниться

  return (
    <div>
      <button onClick={() => setUrl("https://api.example.com/new-data")}>
        Завантажити нові дані
      </button>
      <p>{data ? JSON.stringify(data) : "Завантаження..."}</p>
    </div>
  );
}

масив не вказано: ефект виконується на кожному рендерингу
порожній масив: ефект виконується лише при монтуванні
масив з елементами: ефект виконується, коли змінюється будь-який елемент

Очищення ефекту

Якщо хук потребує очищення (наприклад, при роботі з підписками або таймерами), ви можете повернути функцію з useEffect:

jsx

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log("Таймер працює...");
  }, 1000);

  return () => clearInterval(intervalId); // Очистити таймер
}, []);

Використання useEffect:

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Як працює useEffect у React?