useEffect – это хук в библиотеке React, который позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты – это операции, которые могут влиять на другие компоненты или которые должны выполняться после того, как React обновил DOM, например, запросы к API, подписки, изменение DOM напрямую и так далее. Как работает useEffect:
Выполнение после рендеринга: useEffect запускается после того, как компонент отрендерился и коммитнул изменения в DOM. Это значит, что вы можете быть уверены, что ваш компонент и все его подкомпоненты уже отрендерены, когда код внутри useEffect выполняется.
Зависимости: Вы можете указать массив зависимостей вторым аргументом хука useEffect. Если массив пустой ([]), эффект выполнится один раз после первого рендеринга. Если в массиве есть переменные, эффект будет выполняться каждый раз, когда эти переменные изменяются.
Очистка: useEffect может возвращать функцию для очистки, которая будет вызвана перед тем, как компонент будет размонтирован или перед следующим вызовом эффекта. Это полезно для отмены подписок, таймеров и других эффектов, которые не должны продолжаться после того, как компонент перестанет существовать или перед тем, как эффект будет повторно выполнен.
import React, { useState, useEffect } from 'react';
function ExampleComponent() { const [count, setCount] = useState(0);
// Эффект для обновления заголовка документа, используя API браузера useEffect(() => { document.title = `Вы нажали ${count} раз`; }, [count]); // Эффект зависит от переменной count
return (
Вы нажали {count} раз
); }
В этом коде useEffect используется для изменения заголовка документа каждый раз, когда переменная count изменяется.