> Как использовать useEffect для вызова кода при монтировании компонента (React)

Для вызова кода при монтировании компонента с помощью useEffect нужно передать в него функцию с нужным кодом и пустой массив зависимостей []. Это гарантирует, что эффект выполнится только один раз - после первого рендера компонента.

Пример:

JSX
import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Код, который выполнится при монтировании
    console.log('Компонент смонтирован');
    // Например, загрузка данных с API
    fetch('/api/data')
      .then(response => response.json())
      .then(data => console.log(data));
  }, []); // Пустой массив зависимостей

  return <div>Содержимое компонента</div>;
}

Если нужно выполнить очистку при размонтировании (например, отменить подписку или таймер), верните функцию из эффекта:

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

  return () => {
    clearInterval(timer); // Очистка при размонтировании
  };
}, []);

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