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

Метод 1: базовое использование
Самый простой способ использовать useEffect— передать функцию в качестве первого аргумента. Эта функция будет выполняться после каждого рендеринга компонента. Вот пример:

import React, { useEffect } from 'react';
const MyComponent = () => {
  useEffect(() => {
    // Perform side effects here
    console.log('Component rendered');
  });
  return <div>My Component</div>;
};

Метод 2: однократный запуск (ComponentDidMount)
Иногда нам нужно, чтобы эффект запускался только один раз при монтировании компонента, аналогично методу жизненного цикла componentDidMountв компонентах класса. Для этого мы передаем пустой массив в качестве второго аргумента функции useEffect. Вот пример:

import React, { useEffect } from 'react';
const MyComponent = () => {
  useEffect(() => {
    // Run once on component mount
    console.log('Component mounted');
  }, []);
  return <div>My Component</div>;
};

Метод 3: запуск при изменении зависимостей
Мы можем указать зависимости для useEffect, передав массив в качестве второго аргумента. Эффект будет работать только в том случае, если какая-либо из зависимостей изменится. Вот пример:

import React, { useEffect, useState } from 'react';
const MyComponent = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('Count changed:', count);
  }, [count]);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <span>{count}</span>
    </div>
  );
};

Метод 4: функция очистки
Иногда нам необходимо очистить ресурсы, когда компонент размонтируется или когда изменяются зависимости. Чтобы справиться с этим, мы можем вернуть функцию очистки из useEffect. Вот пример:

import React, { useEffect, useState } from 'react';
const MyComponent = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);
    return () => {
      clearInterval(interval);
    };
  }, []);
  return <div>Count: {count}</div>;
};

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

Не забудьте использовать соответствующий метод в зависимости от вашего варианта использования, чтобы обеспечить оптимальную производительность и удобство обслуживания кода.