Понимание useEffect в React: From Zero to Hero

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

Что такое useEffect?

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

До появления перехватчиков в React 16.8 вам приходилось использовать компоненты классов и методы жизненного цикла, такие как компонентDidMount, компонентDidUpdate и компонентWillUnmount, для обработки побочных эффектов. Теперь с помощью useEffect эти события жизненного цикла объединены в одну функцию для функциональных компонентов.

Почему стоит выбрать useEffect?

useEffect — это мощный инструмент для управления побочными эффектами в React по нескольким причинам:

1. Упрощение кода: Устраняет необходимость в компонентах на основе классов и методах жизненного цикла, позволяя писать более чистый, функциональный код.
2. Централизованные побочные эффекты: Вы можете управлять всеми побочными эффектами, такими как получение данных или обновление DOM, в одном месте.
3. Улучшенная читаемость: Упрощает управление событиями жизненного цикла, делая код более читабельным и менее сложным.
4. Гибкость: Благодаря useEffect у вас есть больше контроля над тем, когда и как часто выполняются побочные эффекты, поскольку вы можете определить зависимости, которые определяют, когда эффект должен запускаться.

Как это работает?

Хук useEffect принимает два аргумента:

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

Вот базовая структура:

useEffect(() => {
  // Side effect logic goes here

  return () => {
    // Optional cleanup function
  };
}, [/* Dependencies go here */]);

Пример:

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

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetching data when the component mounts
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => setData(json));

    // Optional cleanup (in this case, not needed)
    return () => {
      // Cleanup logic if necessary
    };
  }, []); // Empty array means this effect will only run once when the component mounts

  return 
{data ? data.title : 'Loading...'}
;
}

В этом примере данные извлекаются из API при первой визуализации компонента, а результат отображается в пользовательском интерфейсе. Поскольку мы передаем пустой массив зависимостей, этот эффект срабатывает только один раз после первого рендеринга.

Управление побочными эффектами в useEffect

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

Эффекты без очистки

Не все эффекты требуют очистки. Очистка необходима только в том случае, если вам нужно что-то удалить или сбросить после выполнения эффекта, например, очистка таймеров или отписка от потоков данных.

Например, вот сценарий, в котором очистка не требуется:

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

function NoCleanupEffect() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect without cleanup runs every time the count changes');
  }, [count]); // Runs every time `count` changes

  return (
    

      
{count}
       setCount(count   1)}>Increment
    
  );
}

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

Эффекты с очисткой

Если ваш эффект включает в себя настройку подписок или таймеров, вам, вероятно, придется выполнить очистку после эффекта. Например, представьте себе сценарий, в котором мы хотим установить таймер:

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

function TimerComponent() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime   1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => {
      clearInterval(interval);
    };
  }, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts

  return 
{time} seconds have passed
;
}

Вот что происходит:

1. Функция setInterval устанавливает таймер, который увеличивает время каждую секунду.
2. Функция очистки (возвращаемая useEffect) очищает интервал, когда компонент размонтируется. Это гарантирует, что таймер не продолжит работу после удаления компонента.

Примеры сценариев использованияЭффект

Давайте рассмотрим некоторые распространенные сценарии, в которых useEffect особенно полезен.

Получение данных при монтировании компонента

Извлечение данных при монтировании компонента — один из наиболее распространенных вариантов использования useEffect.

useEffect(() => {
  fetchData();

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }
}, []); // Empty dependency array means it runs once when the component mounts

Обновление DOM

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

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Updates the document title whenever `count` changes

Очистка при размонтировании компонента

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

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Cleanup listener when the component unmounts

Часто задаваемые вопросы

1. Что произойдет, если я опущу массив зависимостей в useEffect?

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

2. Могу ли я запустить useEffect только один раз?

Да, передача пустого массива зависимостей [] гарантирует, что эффект запустится только один раз после монтирования компонента.

3. Что такое функция очистки в useEffect?

Функция очистки позволяет отменить эффект при размонтировании компонента или перед повторным запуском эффекта. Это полезно для очистки таймеров, прослушивателей событий или подписок.

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