Хук useEffect

Кожен раз, коли змінюється стан clicks, компонент оновлюється. Це означає, що ми можемо використовувати хук useEffect, який буде, наприклад, змінювати заголовок HTML-документа.

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()=>{...дії...}»