Что произойдет, если не указать зависимости в hook?

Что происходит без массива зависимостей?

Когда вы используете хук useEffect без второго аргумента (массива зависимостей), эффект будет запускаться после каждого рендера компонента. Это означает, что при любом изменении состояния или пропсов, которое вызывает повторный рендер, эффект выполнится снова.

Почему это проблема?

Если внутри такого эффекта вы изменяете состояние (например, через setState), это вызовет новый рендер, который снова запустит эффект, и так до бесконечности. Это приводит к зависанию браузера или ошибкам.

Пример кода

import React, { useState, useEffect } from 'react';

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

  // Без зависимостей — бесконечный цикл
  useEffect(() => {
    setCount(count + 1);
  });

  return <div>{count}</div>;
}

В этом примере каждый рендер увеличивает count, что вызывает новый рендер и снова запускает эффект.

Как правильно указывать зависимости?

• Пустой массив [] — эффект выполняется только при монтировании и размонтировании.
• Массив с переменными [count] — эффект выполняется только при изменении этих переменных.
• Без массива — эффект выполняется после каждого рендера (используйте с осторожностью).

Вывод

Всегда указывайте массив зависимостей в useEffect, чтобы контролировать, когда должен выполняться побочный эффект. Это предотвращает неожиданное поведение и улучшает производительность приложения.