useEffectEvent.md

title	useEffectEvent

useEffectEvent — це хук React, який дає змогу винести нереактивну логіку з ваших ефектів у функцію, яку можна використовувати повторно, — так звану Подію ефекту.

const onSomething = useEffectEvent(callback)

Довідка {/reference/}

useEffectEvent(callback) {/useeffectevent/}

Викликайте useEffectEvent на верхньому рівні вашого компонента, щоб оголосити Подію ефекту. Події ефекту — це функції, які ви можете викликати всередині ефектів, таких як useEffect:

import { useEffectEvent, useEffect } from 'react';

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      onConnected();
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);

  // ...
}

Дивіться більше прикладів нижче.

Параметри {/parameters/}

• callback: Функція, що містить логіку для вашої Події ефекту. Коли ви визначаєте Подію ефекту за допомогою useEffectEvent, callback завжди матиме доступ до найновіших значень із пропсів і стану, коли він викликається. Це допомагає уникнути проблем із "застарілими замиканнями" (stale closures).

Повертає {/returns/}

Повертає функцію Події ефекту. Ви можете викликати цю функцію всередині useEffect, useLayoutEffect або useInsertionEffect.

Застереження {/caveats/}

• Викликайте лише всередині ефектів: Події ефекту слід викликати лише в ефектах. Визначайте їх безпосередньо перед ефектом, який їх використовує. Не передавайте їх іншим компонентам або хукам. Лінтер eslint-plugin-react-hooks (версія 6.1.1 або вище) забезпечить дотримання цього обмеження, щоб запобігти виклику Подій ефекту в неправильному контексті.
• Це не скорочення для залежностей: Не використовуйте useEffectEvent, щоб уникнути зазначення залежностей у масиві залежностей вашого ефекту. Це може приховати помилки та ускладнити розуміння вашого коду. Віддайте перевагу явним залежностям або використовуйте refs для порівняння попередніх значень, якщо це необхідно.
• Використовуйте для нереактивної логіки: Використовуйте useEffectEvent лише для винесення логіки, яка не залежить від зміни значень.

---

Використання {/usage/}

Зчитування найновіших пропсів і стану {/reading-the-latest-props-and-state/}

Зазвичай, коли ви отримуєте доступ до реактивного значення всередині ефекту, ви повинні включити його до масиву залежностей. Це гарантує, що ваш ефект знову запуститься, коли це значення зміниться, що зазвичай є бажаною поведінкою.

Але в деяких випадках ви можете захотіти прочитати найновіші пропси або стан всередині ефекту, не викликаючи повторного запуску ефекту при зміні цих значень.

Щоб прочитати найновіші пропси або стан у вашому ефекті, не роблячи ці значення реактивними, включіть їх у Подію ефекту.

import { useEffect, useContext, useEffectEvent } from 'react';

function Page({ url }) {
  const { items } = useContext(ShoppingCartContext);
  const numberOfItems = items.length;

  const onNavigate = useEffectEvent((visitedUrl) => {
    logVisit(visitedUrl, numberOfItems);
  });

  useEffect(() => {
    onNavigate(url);
  }, [url]);

  // ...
}

У цьому прикладі ефект повинен повторно запуститися після рендерингу, коли змінюється url (щоб зафіксувати відвідування нової сторінки), але він не повинен повторно запускатися, коли змінюється numberOfItems. Загорнувши логіку логування в Подію ефекту, numberOfItems стає нереактивним. Він завжди береться з найновішого значення без запуску ефекту.

Ви можете передати реактивні значення, як-от url, як аргументи до Події ефекту, щоб зберегти їх реактивними, отримуючи доступ до найновіших нереактивних значень всередині події.