Народ, всем привет. Это продолжение темы изучения React, библиотеки, призванная помочь нам быстрее и эффективнее писать сайты и приложения за счет управления состоянием. Мы уже описывали такие хуки, как useState и useMemo, да и что такое React в целом, если вдруг вы не в курсе. Поэтому повторяться не буду, я сразу перейду к делу.
Дело в том, что все современные приложения должны выполнять какие-то побочные эффекты, назовем это так, запросы к серверу, подписки, работа с таймерами, изменение DOM напрямую и прочее. И вот для таких задач в функциональных компонентах используется хук useEffect. О нем то мы сегодня и поговорим.
Для начала определимся с главным - useEffect является хуком, позволяющий выполнять побочные эффекты после рендера компонента. Он заменяет методы жизненного цикла классов, такие как componentDidMount, componentDidUpdate, componentWillUnmount, если вы когда-то были с ними знакомы.
import { useEffect } from 'react';
useEffect(() => {
// код, который нужно выполнить
});
У данного хука есть два параметра: useEffect(callback, dependencies);
- callback — функция, которая содержит эффект.
- dependencies (зависимости) — массив значений, при изменении которых эффект будет повторно вызываться.
А теперь давайте более подробно. По сути, все что делает хук, это выполняет заложенный код в него после рендера компонента (callback):
useEffect(() => {
console.log('Компонент отрендерен');
});
При этом, если не передать массив зависимостей, useEffect будет выполняться после каждого рендера — при монтировании и обновлениях. Если вы хотите именно этого, тогда вам просто нужно оставить в квадратных скобочках значения зависимостей (dependencies) пустыми (аналог componentDidMount).
useEffect(() => {
console.log('Компонент смонтирован');
}, []); // пустой массив зависимостей, срабатывает один раз — при первом рендере.
Если Вам нравятся наши статьи, и вы хотите отблагодарить автора (на развитие канала), нам будет очень приятно!
Но если вы хотите, чтобы эффект был только при изменении какой-то зависимости, значении и т.д., то их нужно указать:
useEffect(() => {
console.log('Изменилось значение count');
}, [count]); // хук сработает, если count изменится
Получается, что, если count меняется, эффект будет вызываться повторно. Зачем это все нужно? Ну, например, вам нужно сделать запрос данных с сервера:
useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => setData(data));
}, []);
… или, скажем, обработку событий (например, прокрутка)
useEffect(() => {
const handleScroll = () => console.log(window.scrollY);
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
Сразу стоит отметить, что зависимости критичны и очень важны. Это значит, что, скажем, неправильно указанные зависимости могут привести к багам, бесконечным циклам или устаревшим значениям. Также сам useEffect не может быть async, но внутри него можно вызвать async-функцию. При каждом рендере React useEffect сравнивает массив зависимостей текущего эффекта с предыдущим. Если они изменились, выполняет эффект. Он позволяет эффективно управлять побочными эффектами и упрощает логику компонента по сравнению с устаревшими классовыми методами.
Хотите знать больше? Читайте нас в нашем Telegram – там еще больше интересного: новинки гаджетов, технологии, AI, фишки программистов, примеры дизайна и маркетинга.