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