Коли виконується ефект без залежностей?

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

Коли виконується ефект без залежностей

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

Приклад:

javascript

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("Ефект виконано");
  }); // <- немає масиву залежностей!

  return (
    <button onClick={() => setCount(count + 1)}>
      Натиснули {count} раз
    </button>
  );
}

Що станеться:

Компонент рендериться вперше -> useEffect виконується.
Користувач натискає кнопку -> стан count оновлюється -> компонент перемальовується.
useEffect знову виконується.
І так далі - кожен рендер = новий виклик ефекту.

Це може бути проблемою

Такий ефект:

запускається занадто часто,
може викликати нескінченні цикли (якщо всередині useEffect змінюється стан).

Приклад нескінченного циклу

javascript

useEffect(() => {
  setCount(count + 1); // змінюємо стан
});

Кожен рендер викликає setCount, що викликає новий рендер - і знову ефект -> нескінченна петля рендера.

Як запобігти

Щоб виконати ефект тільки один раз при монтуванні, передай порожній масив залежностей:

javascript

useEffect(() => {
  console.log("Ефект виконано один раз");
}, []); // <- порожній масив

Тепер ефект спрацює один раз після першого рендера - аналог componentDidMount().

Підсумок

Масив залежностей	Коли виконується ефект
відсутній	Після кожного рендера
`[]`	Тільки один раз - при монтуванні
`[a, b, c]`	При першому рендері та при зміні будь-якої залежності

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

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

Premium

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

Коли виконується ефект без залежностей?