Какие инструменты и подходы можно использовать в хуке useEffect?

• Инструменты:
  • Функции очистки (cleanup functions) для отписки от подписок, отмены таймеров и т.д.
  • Зависимости (dependencies array) для управления повторным выполнением эффекта.
  • Refs для доступа к DOM-элементам или сохранения изменяемых значений без вызова ререндера.
  • Custom hooks для организации сложной логики эффектов.
• Подходы:
  • Использование нескольких useEffect для разделения логики.
  • Условное выполнение эффектов.
  • Использование useCallback и useMemo для предотвращения лишних ререндеров функций и значений, используемых в зависимостях.
  • Обработка асинхронных операций с помощью async/await внутри функции эффекта (создавая вспомогательную асинхронную функцию).

useEffect(() => {
  // Эффект: подписка на событие
  const handleResize = () => {
    console.log('Окно изменено');
  };

  window.addEventListener('resize', handleResize);

  // Очистка: отписка от события при размонтировании или изменении зависимостей
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Пустой массив зависимостей: эффект выполняется один раз при монтировании

useEffect(() => {
  // Эффект: загрузка данных
  async function fetchData() {
    const response = await fetch(`/api/data?id=${userId}`);
    const data = await response.json();
    setData(data);
  }

  fetchData();

}, [userId]); // Зависимость: эффект выполняется при изменении userId и при монтировании