Использование useEffect в React: Полное руководство для начинающих
useEffect - это хук, который позволяет выполнять побочные эффекты в функциональных компонентах React. Этот хук позволяет добавить поведение компонентам при изменении состояния, пропсов и жизненного цикла компонента.
Формат использования хука useEffect выглядит следующим образом:
import React, { useState, useEffect } from 'react';
function MyComponent(props) {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Вы нажали ${count} раз`;
});
return (
Вы нажали {count} раз
);
}
В этом примере хук useEffect используется для изменения заголовка веб-страницы на количество нажатий кнопки. При каждом изменении состояния компонента, т.е при изменении значения переменной счетчика count, вызывается функция, переданная вторым аргументом хука useEffect.
Функция useEffect принимает первым параметром функцию-эффект, которая будет выполняться при каждом рендере компонента. В данном примере эта функция устанавливает новый заголовок веб-страницы.
Можно передать еще один параметр в функцию useEffect, который представляет собой массив зависимостей. Этот массив содержит значения, от которых зависит выполнение эффекта. В случае, если эти значения не изменились, эффект не будет выполняться заново.
import React, { useState, useEffect } from 'react';
function MyComponent(props) {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Вы нажали ${count} раз`;
}, [count]);
return (
Вы нажали {count} раз
);
}
В этом примере эффект будет выполняться только тогда, когда изменится значение переменной счетчика count.
Таким образом, хук useEffect позволяет выполнять побочные эффекты при изменении состояния компонента или его свойств. Этот хук является незаменимым инструментом для написания компонентов React, которые имеют побочные эффекты.