Какой hook в React позволяет сделать что-либо один раз в нужный момент?

useEffect — ключевой хук для управления побочными эффектами

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

Как useEffect позволяет выполнить действие один раз

Для контроля момента выполнения useEffect принимает второй аргумент — массив зависимостей (dependency array). Если передать пустой массив [], эффект выполнится только один раз — после первого рендера компонента (аналог componentDidMount в классовых компонентах).

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

function UserProfile({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    // Этот код выполнится один раз при монтировании компонента
    console.log('Компонент смонтирован, загружаем данные...');
    
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => setUserData(data))
      .catch(error => console.error('Ошибка загрузки:', error));
      
    // Опциональная функция очистки (cleanup)
    return () => {
      console.log('Компонент будет размонтирован');
    };
  }, []); // Пустой массив зависимостей = выполнить один раз

  return (
    <div>
      {userData ? (
        <h2>{userData.name}</h2>
      ) : (
        <p>Загрузка данных...</p>
      )}
    </div>
  );
}

Важные аспекты использования useEffect для однократного выполнения

1. Точный момент выполнения: Эффект с [] запускается после того, как компонент отрендерился в DOM. Это важно для операций, требующих наличия DOM-элементов.

2. Функция очистки: Может возвращать функцию, которая выполнится при размонтировании компонента. Это критически важно для отписки от событий, отмены запросов или очистки таймеров:

useEffect(() => {
  const timerId = setInterval(() => {
    console.log('Таймер сработал');
  }, 1000);

  // Функция очистки — выполнится при размонтировании
  return () => {
    clearInterval(timerId);
    console.log('Таймер очищен');
  };
}, []); // Однократная установка таймера

1. Предостережения и лучшие практики:
   • Не используйте пустой массив, если эффект зависит от пропсов или состояния — это приведет к багам
   • Для асинхронных операций внутри useEffect используйте IIFE (Immediately Invoked Function Expression) или отдельные асинхронные функции
   • Избегайте использования async/await напрямую в колбэке useEffect, так как он возвращает промис, а React ожидает функцию очистки или undefined

// Правильный подход с асинхронной операцией
useEffect(() => {
  let isMounted = true; // Флаг для избежания состояния гонки
  
  const fetchData = async () => {
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      
      if (isMounted) {
        setData(data);
      }
    } catch (error) {
      console.error('Ошибка:', error);
    }
  };
  
  fetchData();
  
  return () => {
    isMounted = false; // Очистка при размонтировании
  };
}, []);

Альтернативы и смежные хуки

Хотя useEffect с пустым массивом зависимостей — основной способ выполнить действие один раз, в некоторых случаях могут быть полезны:

• useLayoutEffect — выполняется синхронно после рендера, но перед отрисовкой в браузере. Используется для операций, которые должны завершиться до визуального обновления (например, измерение DOM-элементов).
• Кастомные хуки — для повторяющейся логики можно создать собственный хук:

function useMountEffect(callback) {
  useEffect(callback, []);
}

// Использование
function MyComponent() {
  useMountEffect(() => {
    console.log('Компонент смонтирован!');
  });
  
  return <div>Содержимое</div>;
}

Когда именно использовать useEffect с пустым массивом

• Инициализация — загрузка начальных данных, настройка соединений
• Подписки — добавление глобальных слушателей событий
• Интеграция со сторонними библиотеками — инициализация плагинов, которые требуют DOM
• Отправка аналитики — логирование факта показа компонента

Важное замечание: В Strict Mode при разработке React намеренно дважды вызывает эффекты монтирования/размонтирования, чтобы выявить проблемы с отсутствием правильной очистки. Это не влияет на продакшен, но помогает находить потенциальные утечки памяти.

Таким образом, useEffect с пустым массивом зависимостей [] — это стандартный и наиболее часто используемый подход для выполнения кода один раз при монтировании компонента в React-приложениях, построенных на функциональных компонентах.