useeffect.md

Поведение зависимости useEffect в React

Три сценария

1. Без массива зависимостей - useEffect(() => {...})

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

function Component() {
  const [count, setCount] = useState(0);
  
  // Этот эффект запускается после КАЖДОГО рендера (монтирование + обновление)
  useEffect(() => {
    console.log("Эффект запускается после каждого рендера!");
  });
  
  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

Каждый раз при нажатии кнопки компонент перерисовывается и эффект запускается снова.

2. Пустой массив зависимостей - useEffect(() => {...}, [])

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

function Component() {
  const [count, setCount] = useState(0);
  
  // Этот эффект запускается только ОДИН РАЗ после первоначального монтирования
  useEffect(() => {
    console.log("Эффект запускается только один раз после монтирования!");
  }, []);
  
  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

Нажатие кнопки будет обновлять счетчик, но не будет вызывать эффект снова.

3. С зависимостями - useEffect(() => {...}, [dep1, dep2])

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

function Component({ userId }) {
  const [data, setData] = useState(null);
  
  // Этот эффект запускается при монтировании и всякий раз, когда userId изменяется
  useEffect(() => {
    fetchData(userId);
    console.log("Эффект запускается при монтировании и когда userId изменяется!");
  }, [userId]);
  
  const fetchData = async (id) => {
    // получить данные на основе userId
  };
  
  return <div>{/* отрендерить компонент */}</div>;
}

Когда происходят повторные рендеры компонентов?

Компонент React перерисовывается, когда:

• Изменяется его состояние (через useState сеттеры)
• Изменяются его свойства (props) от родительских компонентов
• Изменяется потребляемое значение контекста
• Родительский компонент перерисовывается (если не оптимизирован с помощью React.memo)
• Вызывается forceUpdate (хотя редко используется)

Поэтому, когда вы опускаете массив зависимостей, эффект будет запускаться после каждого из этих повторных рендеров, а не только при монтировании.

Основной вывод

• Без deps: Запускается при монтировании И при каждом обновлении
• Пустой массив []: Запускается только при монтировании
• С deps [a, b]: Запускается при монтировании И когда любая зависимость изменяется