====== Хук 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 (
);
};
Хук useEffect(callback, deps) оголошує ефект, який приймає два аргументи:
* Перший аргумент (callback) завжди є анонімною функцією, всередині якої виконується вся логіка ефекту. Наприклад, запити на сервер, запис у локальне сховище і т.п.
* Другий аргумент (deps) - це масив залежностей ефекту. Коли будь-яка з цих залежностей змінюється, ефект буде викликаний і виконувати callback. Це може бути стан, пропси або будь-яке локальне значення всередині компонента.
* Хук useEffect не повертає жодного значення як результат своєї роботи, а лише запускає виконання анонімної функції. Іншими словами, неможливо виконати в середині функції обчислення і повернути їх у зовнішній код. Ефекти не призначені для цього!
* Для спрацбвання рии розмонтуванні компоненти - в хуку треба додати "**return()=>{...дії...}**"