Хук 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()⇒{…дії…}»