Блог / JavaScript + Ajax / Майстерність React хука useEffect: від основ до просунутих технік

Майстерність React хука useEffect: від основ до просунутих технік

**Meta ** Повний посібник по React хуку useEffect. Дізнайтеся, як керувати побічними ефектами, життєвим циклом компонентів, робити асинхронні запити та уникати поширених помилок. Приклади коду включені. Ця стаття є детальним посібником з одного з найважливіших хуків у React — useEffect. Ми розберемо його синтаксис, принципи роботи, розглянемо патерни для асинхронних операцій, функції очищення та поширені помилки, які допускають навіть досвідчені розробники.
***

React Hooks змінили спосіб, у який ми пишемо функціональні компоненти, дозволивши нам використовувати стан та інші можливості React без написання класів. Серед усіх хуків useEffect займає особливе місце. Він є потужним інструментом для керування "побічними ефектами" — операціями, які виходять за межі простого рендерингу UI. Однак його гнучкість часто стає причиною плутанини та багів: нескінченні цикли, витоки пам'яті, зайві запити на сервер. Мета цієї статті — демістифікувати useEffect, надавши вам знання для впевненого та ефективного його використання, від базових концепцій до просунутих технік.

Що таке побічні ефекти (Side Effects) в React? Перш ніж занурюватися в useEffect, важливо зрозуміти, що таке побічні ефекти. Основне завдання React-компонента — перетворити пропси та стан у JSX (тобто, відрендерити інтерфейс). Будь-яка дія, що виходить за ці межі, є побічним ефектом. Найпоширеніші приклади:

* **Запити до API:** Отримання даних з сервера.

* **Підписки:** Встановлення слухачів подій (addEventListener), підписка на WebSockets.

* **Робота з таймерами:** setTimeout або setInterval.

* **Пряма маніпуляція DOM:** Зміна елементів поза контролем React.

* **Збереження даних:** Запис у localStorage або sessionStorage. Керувати цими ефектами потрібно обережно, щоб вони виконувались у правильний момент життєвого циклу компонента. Саме для цього і створений useEffect.

Основи useEffect

Синтаксис Хук useEffect приймає два аргументи: 1. **Функція (ефект):** Код, який потрібно виконати. 2. **Масив залежностей (опційно):** Масив змінних, від яких залежить ефект.

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Ця функція (ефект) буде виконуватися після кожного рендеру
    document.title = Ви клікнули ${count} разів;
    console.log('Компонент оновився');
  }); // Масив залежностей не вказано

  return (
    
  );
}

Масив залежностей: ключ до контролю Поведінка useEffect повністю залежить від другого аргументу — масиву залежностей. Розглянемо три основні сценарії. #### 1. Без масиву залежностей: виконується після кожного рендеру Якщо ви не передаєте другий аргумент, ефект буде виконуватися після **кожного** рендеру компонента. Це може призвести до проблем з продуктивністю та нескінченних циклів, тому використовується рідко.

useEffect(() => {
  // Запуститься після початкового рендеру та кожного оновлення
});

#### 2. Порожній масив []: виконується лише один раз Це аналог методу componentDidMount у класових компонентах. Ефект виконається тільки один раз, після першого монтування (рендеру) компонента в DOM. Ідеально підходить для початкового завантаження даних.

const [data, setData] = useState(null);

useEffect(() => {
  // Виконується один раз після першого рендеру
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(setData);
}, []); // <-- Порожній масив

#### 3. Масив зі значеннями [prop, state]: виконується при зміні залежностей Це найпоширеніший випадок, аналог componentDidUpdate. Ефект виконається після першого рендеру, а потім — кожного разу, коли **будь-яке** значення в масиві залежностей зміниться.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Виконується при першому рендері та щоразу, коли змінюється userId
    fetch(https://api.example.com/users/${userId})
      .then(res => res.json())
      .then(setUser);
  }, [userId]); // <-- Залежність від пропса userId

  if (!user) {
    return Завантаження...;
  }

  return {user.name};
}

Функція очищення (Cleanup Function) Що робити, якщо ваш ефект створює підписку або таймер? Якщо компонент буде демонтовано, підписка залишиться активною, що призведе до витоків пам'яті. Для цього useEffect дозволяє повернути функцію — функцію очищення. Ця функція буде викликана: 1. Перед виконанням наступного ефекту (якщо залежності змінились). 2. Перед демонтуванням компонента (аналог componentWillUnmount).

useEffect(() => {
  const handleResize = () => console.log('Розмір вікна змінено');

  // Додаємо слухача подій
  window.addEventListener('resize', handleResize);

  // Повертаємо функцію очищення
  return () => {
    console.log('Прибираємо слухача...');
    window.removeEventListener('resize', handleResize);
  };
}, []);

Просунуті патерни та поширені помилки

Асинхронні операції та useEffect Ви не можете зробити функцію ефекту асинхронною напряму:

// НЕПРАВИЛЬНО!
useEffect(async () => {
  const data = await fetchData();
  // ...
}, []);

Це не спрацює, тому що useEffect очікує, що функція поверне або нічого, або функцію очищення. Асинхронна функція завжди повертає Promise.
**Правильний підхід** — створити асинхронну функцію всередині ефекту і викликати її:

useEffect(() => {
  const loadData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error("Не вдалося завантажити дані:", error);
    }
  };

  loadData();
}, []);

Боротьба з нескінченними циклами Найпоширеніша помилка — створення нескінченного циклу рендерів. Це трапляється, коли ефект оновлює стан, від якого сам і залежить.

function BadComponent() {
  const [count, setCount] = useState(0);

  // НЕПРАВИЛЬНО!
  useEffect(() => {
    // Цей ефект змінює стан count
    setCount(count + 1);
  }, [count]); // І водночас залежить від count, створюючи нескінченний цикл
  
  return {count};
}

Щоб цього уникнути, переконайтеся, що ваш ефект не змінює свої залежності безконтрольно.

Залежності: об'єкти та функції JavaScript порівнює об'єкти та функції за посиланням, а не за вмістом. Якщо ви передасте об'єкт або функцію, створену всередині компонента, в масив залежностей, ефект буде виконуватися при кожному рендері, оскільки посилання на них щоразу нове.
**Рішення:**

* Для функцій використовуйте хук useCallback.

* Для об'єктів використовуйте хук useMemo.

* Якщо значення статичне, виносьте його за межі компонента.

Висновок useEffect — це швейцарський ніж для роботи з побічними ефектами у React. Розуміння його трьох ключових аспектів: 1. **Функції ефекту**, що виконує логіку. 2. **Масиву залежностей**, що контролює частоту запусків. 3. **Функції очищення**, що запобігає витокам пам'яті. дозволить вам писати чистий, ефективний та передбачуваний код. Не бійтеся експериментувати, але завжди пам'ятайте про правила, щоб уникнути поширених пасток. ---
**Маєте питання або пропозиції?** Зв'яжіться з автором за адресою: isholegg@gmail.com.
**Ключові слова:** React, useEffect, React Hooks, JavaScript, побічні ефекти, lifecycle, componentDidMount, componentDidUpdate, componentWillUnmount, асинхронність, frontend розробка, програмування, приклади коду, гайд.

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння