Как будет работать useEffect, если массив зависимостей пустой?

useEffect с пустым массивом зависимостей

Основное поведение

Когда массив зависимостей пустой ([]), useEffect выполнится один раз — сразу после первого рендера компонента, когда компонент был примонтирован. Это отличается от других сценариев использования useEffect.

Различия в поведении useEffect

Важно различать три сценария:

// 1. БЕЗ массива зависимостей - запускается после КАЖДОГО рендера
useEffect(() => {
  console.log('Запускается после КАЖДОГО рендера');
});

// 2. С ПУСТЫМ массивом зависимостей - запускается только при монтировании
useEffect(() => {
  console.log('Запускается только один раз');
}, []);

// 3. С зависимостями - запускается, если зависимости изменились
useEffect(() => {
  console.log('Запускается при изменении зависимостей');
}, [dependency]);

Практические примеры

Загрузка данных при монтировании

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Эта функция запустится ровно один раз
    const fetchUser = async () => {
      try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        setUser(data);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, []);

  if (loading) return <div>Загрузка...</div>;
  return <div>{user.name}</div>;
}

Инициализация WebSocket соединения

function ChatComponent() {
  useEffect(() => {
    const socket = new WebSocket('ws://server');
    
    socket.onopen = () => {
      console.log('Соединение установлено');
    };

    return () => {
      socket.close();
    };
  }, []);

  return <div>Чат готов</div>;
}

Функция очистки (Cleanup)

Даже с пустым массивом зависимостей можно вернуть функцию очистки, которая запустится при размонтировании компонента:

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Тик');
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

Частые ошибки

Ошибка 1: Забыл добавить пустой массив

// НЕПРАВИЛЬНО: запускается после КАЖДОГО рендера
useEffect(() => {
  fetch('/api/data');
});

// ПРАВИЛЬНО: запускается один раз
useEffect(() => {
  fetch('/api/data');
}, []);

Ошибка 2: Забыл про cleanup

// НЕПРАВИЛЬНО: утечка памяти
useEffect(() => {
  window.addEventListener('resize', handleResize);
}, []);

// ПРАВИЛЬНО: удалить слушатель при размонтировании
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

Жизненный цикл с пустым массивом

Эффект запускается после монтирования и cleanup вызывается при размонтировании, но не на каждый рендер.

Итог

С пустым массивом зависимостей useEffect идеален для:

• Инициализации состояния
• Загрузки данных при первом монтировании
• Установки слушателей событий с cleanup
• Подключения к WebSocket с cleanup
• Загрузки конфигурации приложения