Иногда компоненту нужно выполнить побочное действие — то, что выходит за рамки простого рендера: запрос к серверу, подписка, таймер, работа с заголовком вкладки. Для этого есть хук useEffect:
import { useEffect, useState } from "react";
function Title() { const [count, setCount] = useState(0); useEffect(() => { document.title = "Нажато: " + count; }, [count]); return <button onClick={() => setCount(count + 1)}>+1</button>; }
Второй аргумент — массив зависимостей [count]. Эффект запускается после рендера и затем повторяется только когда меняется что-то из этого массива. Если массив пустой [] — эффект выполнится один раз после первого рендера (удобно для начальной загрузки). Если массива нет вовсе — после каждого рендера.
Если эффект что-то «открывает» (таймер, подписку), он может вернуть функцию очистки — она сработает перед следующим запуском и при удалении компонента.