Хук useEffect — это фундаментальная часть React, позволяющая выполнять побочные эффекты в функциональных компонентах. Вот подробная разбивка:

Что такое useEffect?

• Хук useEffect позволяет выполнять побочные эффекты в ваших компонентах, такие как получение данных, подписки или ручное изменение DOM.
• Это можно рассматривать как комбинацию методов жизненного цикла компонентDidMount, компонентDidUpdate и компонентWillUnmount.

Синтаксис

useEffect(() => {
  // Your side effect code here

  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

Параметры

1. Функция эффекта: первый аргумент — это функция, содержащая код побочного эффекта. Эта функция будет запущена после того, как рендеринг будет зафиксирован на экране.

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

3. Массив зависимостей: второй аргумент представляет собой массив зависимостей. Эффект срабатывает только при изменении одной из зависимостей. Если вы передаете пустой массив ([]), эффект запускается только один раз после первоначального рендеринга (например, компонентDidMount).

Примеры использования

1. Базовый пример: получение данных при монтировании

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

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Runs only once after the initial render

  return 
{data ? JSON.stringify(data) : 'Loading...'}
;
};

1. Пример очистки: подписка на событие

import React, { useEffect } from 'react';

const EventListenerComponent = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized:', window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Cleanup function to remove the event listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Runs only once after the initial render

  return 
Resize the window and check the console.
;
};

1. Пример зависимости: запуск эффекта на основе изменения реквизита

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

const TimerComponent = ({ delay }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount   1);
    }, delay);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, [delay]); // Runs every time `delay` changes

  return 
Count: {count}
;
};

Лучшие практики

• Укажите зависимости: всегда включайте переменные, от которых зависит ваш эффект, в массив зависимостей, чтобы избежать устаревших замыканий.
• Избегайте побочных эффектов при рендеринге: не допускайте побочных эффектов на этапе рендеринга; вместо этого используйте useEffect.
• Используйте функции очистки: если ваш эффект создает подписки или таймеры, всегда возвращайте функцию очистки, чтобы избежать утечек памяти.

Заключение

Хук useEffect — это мощный инструмент для обработки побочных эффектов в функциональных компонентах, что делает его незаменимым для современной разработки React. Понимая его синтаксис и лучшие практики, вы сможете эффективно управлять поведением компонентов и побочными эффектами.