Порожній масив залежностей
Коли виконується ефект з порожнім масивом залежностей
Якщо ти передаєш у useEffect порожній масив залежностей ([]),
то ефект виконається лише один раз -
після першого рендеру (тобто під час монтування компонента).
Приклад
javascript
import { useEffect } from "react";
function Example() {
useEffect(() => {
console.log("Ефект виконано один раз при монтуванні");
}, []); // порожній масив залежностей
return <div>Приклад</div>;
}Що відбудеться:
- Компонент вперше з'являється на екрані (монтується).
- React рендерить його вміст.
- Після рендеру React викликає
useEffect. - Ефект більше ніколи не викличеться, навіть якщо компонент перемалюється.
Аналогія з класами
Такий useEffect(() => {...}, []) повністю аналогічний методу:
javascript
componentDidMount() {
// викликається один раз при монтуванні
}у класовому компоненті.
Очищення (cleanup) при розмонтуванні
Якщо ефект повертає функцію - вона буде викликана лише при розмонтуванні компонента (видаленні з екрана).
javascript
useEffect(() => {
console.log("Підписку встановлено");
return () => {
console.log("Підписку видалено");
};
}, []);Порядок:
- Компонент монтується → виконується
console.log("Підписку встановлено"). - Компонент видаляється → виконується
console.log("Підписку видалено").
Типові сценарії використання []
- Виконати запит до API під час завантаження сторінки
- Підключити слухач подій (і відписатися при видаленні)
- Встановити заголовок сторінки (
document.title) - Запустити один раз таймер або анімацію
Підсумок
| Масив залежностей | Коли виконується ефект |
|---|---|
[] | Один раз при монтуванні, очищення - при розмонтуванні |
[a, b] | При першому рендері і при зміні a або b |
| немає масиву | Після кожного рендеру |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.