useEffectEvent.md

title	useEffectEvent

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

const onSomething = useEffectEvent(callback)

Опис {/reference/}

useEffectEvent(callback) {/useeffectevent/}

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

import { useEffectEvent, useEffect } from 'react';

showNotification('Під'єднано!', theme);

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/}

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

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

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

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, як аргументи до події ефекту, щоб зберегти їх реактивними, отримуючи доступ до найновіших нереактивних значень всередині події.