Що робить useEffect()?

ReactJunior~1 хв читання

Що робить `useEffect()`

Хук useEffect() дозволяє виконувати побічні ефекти у функціональному компоненті.

"Побічний ефект" - це все, що виходить за межі простого рендера JSX:

запити до сервера,

робота з localStorage,

підписки і таймери,

зміна document.title,

взаємодія з DOM.

Синтаксис

javascript

useEffect(() => {
  // побічний ефект
  return () => {
    // необов'язкове очищення
  };
}, [dependencies]);

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

Приклад - запит до API

javascript

import { useEffect, useState } from "react";

function User() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("/api/user")
      .then(res => res.json())
      .then(setUser);
  }, []); // порожній масив -> ефект запуститься один раз

  return <div>{user ? user.name : "Завантаження..."}</div>;
}

Тут useEffect робить запит один раз при монтуванні компонента. (так само, як componentDidMount() у класах)

Як працює масив залежностей

Масив залежностей	Коли виконується ефект
`[]`	Один раз - при монтуванні
`[someValue]`	При першому рендері і при зміні `someValue`
немає масиву	При кожному рендері

Приклад:

javascript

useEffect(() => {
  console.log("Змінився count");
}, [count]);

Запуститься при першому рендері і щоразу, коли зміниться count.

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

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

javascript

useEffect(() => {
  const timer = setInterval(() => console.log("tick"), 1000);

  return () => {
    clearInterval(timer); // очищуємо при розмонтуванні
  };
}, []);

Це аналог componentWillUnmount() у класових компонентах.

Приклад - зміна заголовка сторінки

javascript

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

useEffect(() => {
  document.title = `Clicked ${count} times`;
}, [count]);

Щоразу, коли count змінюється, оновлюється document.title.

Важливо пам'ятати

Правило	Пояснення
`useEffect` завжди виконується після рендера	Не блокує інтерфейс
Масив залежностей обов'язковий	Без нього ефект виконується при кожному рендері
Повернення функції - це очищення ефекту	Використовується для відписки або очищення ресурсів
`useEffect` не можна викликати всередині умов або циклів	Тільки на верхньому рівні компонента

Підсумок

Питання	Відповідь
Що робить `useEffect()`	Дозволяє виконувати побічні ефекти (запити, таймери, підписки, DOM-операції)
Коли виконується	Після рендера, залежно від залежностей
Що робить функція, яку повертають	Очищує ефект (наприклад, відписує або зупиняє таймери)

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

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

Premium

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