xuk_useeffect [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

====== Хук useEffect ======
Хук що стежить за станом якоїсь змінної і якщо модуль монтуєтся, оновлюєтся або розмонтовуєтся - то виконуєтяс функція.
  * Реакція на монтування: useEffect( ()=>{},[]);
  * Реакція на монтування і зміну якоїсь змінної: useEffect( ()=>{},[perem1,perem2]);
  * Реакція на демонтування компонентиии: useEffect( ()=>{return()=>{}},[]);
Кожен раз, коли змінюється стан clicks, компонент оновлюється. Це означає, що ми можемо використовувати хук useEffect, який буде, наприклад, змінювати заголовок HTML-документа.
<code>
  useEffect(() => {опис подій},[массив за чим слідкуємо]);
</code> 
<code>
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>
  );
};

</code>
Хук useEffect(callback, deps) оголошує ефект, який приймає два аргументи:

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