Хук useEffect
Хук що стежить за станом якоїсь змінної і якщо модуль монтуєтся, оновлюєтся або розмонтовуєтся - то виконуєтяс функція.
- Реакція на монтування: useEffect( ()⇒{},[]);
- Реакція на монтування і зміну якоїсь змінної: useEffect( ()⇒{},[perem1,perem2]);
- Реакція на демонтування компонентиии: useEffect( ()⇒{return()⇒{}},[]);
Кожен раз, коли змінюється стан clicks, компонент оновлюється. Це означає, що ми можемо використовувати хук useEffect, який буде, наприклад, змінювати заголовок HTML-документа.
useEffect(() => {опис подій},[массив за чим слідкуємо]);
import { useState, useEffect } from "react"; const App = () => { const [clicks, setClicks] = useState(0); // Оголошуємо ефект useEffect(() => { document.title = `You clicked ${clicks} times`; }); return ( <button onClick={() => setClicks(clicks + 1)}> You clicked {clicks} times </button> ); };
Хук useEffect(callback, deps) оголошує ефект, який приймає два аргументи:
- Перший аргумент (callback) завжди є анонімною функцією, всередині якої виконується вся логіка ефекту. Наприклад, запити на сервер, запис у локальне сховище і т.п.
- Другий аргумент (deps) - це масив залежностей ефекту. Коли будь-яка з цих залежностей змінюється, ефект буде викликаний і виконувати callback. Це може бути стан, пропси або будь-яке локальне значення всередині компонента.
- Хук useEffect не повертає жодного значення як результат своєї роботи, а лише запускає виконання анонімної функції. Іншими словами, неможливо виконати в середині функції обчислення і повернути їх у зовнішній код. Ефекти не призначені для цього!
- Для спрацбвання рии розмонтуванні компоненти - в хуку треба додати «return()⇒{…дії…}»