Простое руководство по использованиюEffect в React

Хук useEffect — это «метод» в функциональных компонентах, который позволяет разработчикам обрабатывать побочные эффекты, возникающие в ответ на изменения реквизитов или состояния компонента. Его цель аналогична методам жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount в компонентах на основе классов, но он более гибкий и простой в использовании. осуществлять.

Функция эффекта

Хук useEffect принимает в качестве аргумента функцию, которая будет выполняться после рендеринга компонента. Эта функция называется функцией «эффект», и ее можно использовать для выполнения любых необходимых побочных эффектов.

import { useEffect, useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([]);

  // Will call fetchToDoList once when the component mounts.
  useEffect(() => {
    fetchTodoList();
  }, []);

  const fethTodoList = async () => {
    const response = await fetch("https://somedomain/todos");
    const data = await response.json();
    setTodos(data);
  };

  return <div>{/*Render list here */}</div>;
};

Массив зависимостей

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

// It will run on every re-render.
useEffect(() => {
  // Do something...
});

// It will only run once.
useEffect(() => {
  // Do something...
}, []);

// It will run every time the "props" dependency changes.
useEffect(() => {
  // Do something...
}, [props]);

Функция очистки

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

// useEffect will run once.
useEffect(() => {
  window.addEventListener("scroll", callback);
  // The cleanup function will run everytime the component unmounts.
  return () => {
    window.removeEventListener("scroll", callback);
  }
}, []);

Избегайте условий гонки

При использовании нескольких обработчиков useEffect в одном компоненте будьте осторожны, чтобы избежать условий гонки, когда один эффект зависит от результата другого эффекта. Чтобы избежать этих проблем, убедитесь, что эффекты расположены правильно, и используйте хук useState для управления промежуточным состоянием.

import { useEffect, useState } from 'react';

function CounterComponent() {
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setCounter((prevCounter) => prevCounter + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  return <div>{counter}</div>;
}

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

Чего следует избегать

В общем, вам следует избегать:

• Управление состоянием в useEffect.
• Включая слишком много зависимостей. Слишком много зависимостей может привести к ненужным повторным рендерингам, что приведет к проблемам с производительностью. Важно тщательно продумать, от каких значений зависит эффект, и включить только необходимые зависимости.
• Без учета зависимостей. Если хук useEffect не имеет никаких зависимостей, он будет повторно запускаться каждый раз при отрисовке компонента. Это может привести к проблемам с производительностью и вызвать непредвиденные побочные эффекты.
• Не удалось очистить эффекты. Если хук useEffect устанавливает подписку или другой ресурс, который необходимо очистить, важно вернуть функцию очистки из эффекта. Невыполнение этого требования может привести к утечке памяти и другим проблемам.
• Выполнение дорогостоящих операций в эффекте. Хук useEffect следует использовать для задач, минимально влияющих на производительность, таких как выполнение вызовов API или настройка подписок. Избегайте выполнения дорогостоящих операций или вычислений в эффекте, так как это может привести к проблемам с производительностью.

Заключение

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