Хук эффекта useEffect в React

Для работы с эффектами применяется хук useEffect. Давайте посмотрим на его работу.

Для начала импортируем наш хук:

import { useEffect } from 'react';

Создадим компонент App, содержащий заголовок:

function App() { return ( <div> <h1>React App</h1> </div> ); } export default App;

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

Применим наш хук:

function App() { useEffect(() => { document.body.style.backgroundColor = 'green'; }, []); ... }

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

С помощью хука useEffect поменяйте тайтл страницы.



Чат с GPT Компилятор