Опанування основ React’s useEffect: Посібник для початківців - javascript.org.ua

Що я дізнався, працюючи з useEffect у React

Коли я вперше почав вивчати React, useEffect здавався одним з найбільш загадкових хуків. Але досить швидко я зрозумів, що це один з найпотужніших інструментів в екосистемі React. Якщо ви працюєте з React або тільки починаєте, розуміння useEffect є важливим для управління побічними ефектами у ваших додатках.

У цьому дописі я розіб'ю useEffect на прості, зрозумілі частини, щоб допомогти вам зрозуміти основи і почати використовувати його ефективно.

Що таке `useEffect`?

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

Отримання даних з API
Підписка на сервіс
Ручне оновлення DOM
Налаштування таймерів або інтервалів

До введення хуків, побічні ефекти зазвичай оброблялися у методах життєвого циклу, таких як componentDidMount і componentDidUpdate. useEffect спрощує цей процес.

Базовий синтаксис `useEffect`

Ось як виглядає найпростіший useEffect:

import React, { useState, useEffect } from 'react';  
function ExampleComponent() {  
 const [count, setCount] = useState(0);  
 useEffect(() => {  
 document.title = `You clicked ${count} times`;  
 });  
 return (  

You clicked {count} times
 setCount(count + 1)}>    Click me        
    );  
}

Як це працює

Хук useEffect приймає два аргументи:
1. Функція (ваш побічний ефект).
2. Необов'язковий масив залежностей.

У прикладі вище:
- Кожен раз, коли компонент рендериться, useEffect оновлює заголовок документа, щоб відобразити кількість кліків по кнопці.

Масив залежностей: пояснення

Справжня сила useEffect полягає в управлінні тим, коли він виконується, використовуючи масив залежностей.

1. Виконувати на кожному рендері (без масиву залежностей):

useEffect(() => {    
 console.log('Runs after every render');  
});

2. Виконувати тільки один раз (порожній масив залежностей):

useEffect(() => {    
 console.log('Runs only once (like componentDidMount)');  
}, []);

3. Виконувати, коли змінюється стан/пропси:

useEffect(() => {    
 console.log('Runs when count changes');  
}, [count]);

Передаючи [count] як залежність, ефект виконується тільки коли змінюється стан count, що робить його більш ефективним.

Очищення ефектів

Іноді побічні ефекти потребують очищення — наприклад, видалення прослуховувачів подій (Event Listener) або скасування запитів до API. useEffect дозволяє повернути функцію очищення для обробки цього.

useEffect(() => {    
 const timer = setInterval(() => {    
 console.log('Interval running');    
 }, 1000);  
 return () => {    
 clearInterval(timer); // Cleanup on unmount    
 console.log('Interval cleared');    
 };  
}, []);

Реальний приклад: отримання даних

Типовий випадок використання useEffect — це отримання даних з API:

useEffect(() => {    
 async function fetchData() {    
 const response = await fetch('https://api.example.com/data');    
 const data = await response.json();    
 console.log(data);    
 }       
 fetchData();  
}, []);

Тут запит до API виконується тільки один раз, коли компонент монтується.

Поширені помилки, яких варто уникати

Відсутність масиву залежностей: Це може призвести до безкінечних циклів. Завжди додавайте залежності або використовуйте порожній масив.
Неправильні залежності: Залишаючи деякі залежності, можна отримати застарілі або некоректні дані. Переконайтеся, що всі відповідні стани/пропси є в масиві.
Занадто багато ефектів: Розбивайте великі ефекти на менші, зручніші для читання.

Чому `useEffect` важливий

Опанувавши useEffect, ви зможете:

Легко обробляти асинхронні запити до API.
Чисто управляти підписками та прослуховувачами подій (Event Listener).
Уникати зайвих повторних рендерів, точно налаштовуючи, коли ефекти виконуються.

Чи працюєте ви над особистими проектами, чи великими додатками, освоєння useEffect може значно покращити ваші навички в React.

Перекладено з: Mastering the Basics of React’s useEffect: A Beginner’s Guide

Що таке useEffect?

Базовий синтаксис useEffect