Відокремлення подій від ефектів

Вибір між обробниками подій та ефектами

Спочатку нагадаємо різницю між обробниками подій та ефектами.

Уявіть, що ви розробляєте компонент чату. Ваші вимоги виглядають наступним чином:

1. Ваш компонент має автоматично підключатися до обраної кімнати чату.
2. Коли ви натискаєте кнопку "Відправити", вона має відправити повідомлення в чат.

Припустимо, ви вже реалізували код для них, але не знаєте, куди його вставити. Чи варто використовувати обробники подій або ефекти? Щоразу, коли вам потрібно відповісти на це питання, подумайте чому код повинен працювати.

Обробники подій запускаються у відповідь на певні взаємодії

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

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');
  // ...
  function handleSendClick() {
    sendMessage(message);
  }
  // ...
  return (
    <>
      <input value={message} onChange={e => setMessage(e.target.value)} />
      <button onClick={handleSendClick}>Send</button>;
    </>
  );
}

За допомогою обробника подій ви можете бути впевнені, що sendMessage(message) буде запущено лише якщо користувач натисне кнопку.

Ефекти запускаються щоразу, коли потрібна синхронізація

Нагадаємо, що вам також потрібно, щоб компонент був підключений до чату. Куди йде цей код?

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

function ChatRoom({ roomId }) {
  // ...
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
  // ...
}

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

Реактивні значення та реактивна логіка

Інтуїтивно можна сказати, що обробники подій завжди запускаються "вручну", наприклад, натисканням кнопки. Натомість ефекти є "автоматичними": вони запускаються і повторюються стільки разів, скільки потрібно для синхронізації.

Існує більш точний спосіб подумати про це.

Пропси, стан та змінні, оголошені у тілі вашого компонента, називаються реактивними значеннями</CodeStep> . У цьому прикладі <code>serverUrl не є реактивним значенням, але roomId і message є. Вони беруть участь у потоці даних рендерингу:

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  // ...
}

Такі реактивні значення можуть змінюватися внаслідок повторного рендерингу. Наприклад, користувач може відредагувати повідомлення або обрати інше roomId у випадаючому списку. Обробники подій та ефекти реагують на зміни по-різному:

• Логіка всередині обробників подій не є реактивною. Вона не запуститься знову, доки користувач не виконає ту саму взаємодію (наприклад, натискання) знову. Обробники подій можуть читати реактивні значення, не "реагуючи" на їхні зміни.
• Логіка всередині ефектів є реактивною. Якщо ваш ефект читає реактивне значення, ви повинні вказати його як залежність. Тоді, якщо повторний рендеринг призведе до зміни цього значення, React перезапустить логіку вашого ефекту з новим значенням.

Повернімося до попереднього прикладу, щоб проілюструвати цю різницю.

Логіка всередині обробників подій не є реактивною

Погляньте на цей рядок коду. Ця логіка має бути реактивною чи ні?

// ...
    sendMessage(message);
    // ...

З точки зору користувача, зміна у повідомленні не означає, що він хоче надіслати повідомлення. Це лише означає, що користувач вводить текст. Іншими словами, логіка, яка надсилає повідомлення, не повинна бути реактивною. Вона не повинна запускатися знову тільки тому, що значення реактивне</CodeStep> змінився. Тому він має бути в обробнику події:</p> <pre><code data-meta="{2}" class="language-js">function handleSendClick() { надіслати повідомлення (message); }

Обробники подій не є реактивними, тому sendMessage(message) буде запущено лише тоді, коли користувач натисне кнопку Надіслати.

Логіка всередині Effects є реактивною

А тепер повернімося до цих рядків:

// ...
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    // ...

З точки зору користувача, зміна на roomId означає, що він хоче з'єднатися з іншою кімнатою. Іншими словами, логіка з'єднання з кімнатою повинна бути реактивною. Ви хочете, щоб ці рядки коду "не відставали" від реактивного значення </CodeStep> , і запустить її знову, якщо значення зміниться. Ось чому він має бути ефектом:</p> <pre><code data-meta="{2-3}" class="language-js">useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.connect(); return () => { connection.disconnect() }; }, [roomId]);

Ефекти є реактивними, тому createConnection(serverUrl, roomId) і connection.connect() будуть запускатися для кожного окремого значення roomId. Ваш ефект синхронізує з'єднання чату з поточною вибраною кімнатою.

Вилучення нереактивної логіки з ефектів

Справа ускладнюється, коли ви хочете змішати реактивну логіку з нереактивною.

Наприклад, уявіть, що ви хочете показати сповіщення, коли користувач підключається до чату. Ви зчитуєте поточну тему (темну або світлу) з пропсів, щоб показати сповіщення відповідним кольором:

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });
    connection.connect();
    // ...

Втім, тема є реактивною величиною (вона може змінюватися в результаті повторного рендерингу), а кожна реактивна величина, яку зчитує Ефект, має бути оголошена як його залежність. Тепер вам слід вказати тему як залежність вашого ефекту:

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });
    connection.connect();
    return () => {
      connection.disconnect()
    };
  }, [roomId, theme]); // ✅ All dependencies declared
  // ...

Пограйтеся з цим прикладом і подивіться, чи зможете ви виявити проблему у цьому користувацькому досвіді:

Коли змінюється roomId, чат перепідключається, як і слід було очікувати. Але оскільки тема також є залежною, чат також перепідключається щоразу, коли ви перемикаєтеся між темною та світлою темами. Це не дуже добре!

Інакше кажучи, ви не хочете, щоб цей рядок був реактивним, хоча він знаходиться всередині ефекту (який є реактивним):

// ...
      showNotification('Connected!', theme);
      // ...

Вам потрібен спосіб відокремити цю нереактивну логіку від реактивного ефекту навколо неї.

Оголошення події ефекту

Використовуйте спеціальний хук useEffectEvent для вилучення цієї нереактивної логіки з ефекту:

import { useEffect, useEffectEvent } from 'react';

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

Тут onConnected називається подією ефекту. Це частина вашої логіки ефекту, але вона поводиться більше як обробник події. Логіка всередині нього не є реактивною, і він завжди "бачить" останні значення ваших пропсів та стану.

Тепер ви можете викликати подію ефекту onConnected зсередини вашого ефекту:

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]); // ✅ All dependencies declared
  // ...

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

Переконайтеся, що нова поведінка працює так, як ви очікували:

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

Зчитування останніх пропсів та станів за допомогою подій ефектів

Події ефектів дозволяють виправити багато патернів, у яких може виникнути спокуса приховати літер залежності.

Наприклад, скажімо, у вас є ефект для реєстрації відвідувань сторінки:

function Page() {
  useEffect(() => {
    logVisit();
  }, []);
  // ...
}

Пізніше ви додасте кілька маршрутів на свій сайт. Тепер ваш компонент Page отримує проп url з поточним шляхом. Ви хочете передати url як частину виклику logVisit, але лінтер залежності скаржиться:

function Page({ url }) {
  useEffect(() => {
    logVisit(url);
  }, []); // 🔴 React Hook useEffect has a missing dependency: 'url'
  // ...
}

Подумайте про те, що ви хочете, щоб код робив. Ви хочете реєструвати окремі відвідування для різних URL-адрес, оскільки кожна URL-адреса представляє окрему сторінку. Іншими словами, цей logVisit виклик повинен реагувати на URL. Ось чому у цьому випадку має сенс дотримуватися лінтера залежностей і додати url як залежність:

function Page({ url }) {
  useEffect(() => {
    logVisit(url);
  }, [url]); // ✅ All dependencies declared
  // ...
}

Тепер припустимо, що ви хочете, щоб при кожному відвідуванні сторінки відображалася кількість товарів у кошику:

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

  useEffect(() => {
    logVisit(url, numberOfItems);
  }, [url]); // 🔴 React Hook useEffect has a missing dependency: 'numberOfItems'
  // ...
}

Ви використали numberOfItems всередині ефекту, тому лінтер попросить вас додати його як залежність. Однак ви не хочете, щоб виклик logVisit реагував на numberOfItems. Якщо користувач поклав щось до кошика, а numberOfItems змінився, це не означає , що користувач знову відвідав сторінку. Іншими словами, відвідування сторінки є, у певному сенсі, "подією". Вона відбувається в певний момент часу.

Розділити код на дві частини:

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

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

  useEffect(() => {
    onVisit(url);
  }, [url]); // ✅ All dependencies declared
  // ...
}

Тут onVisit є подією ефекту. Код всередині неї не є реактивним. Ось чому ви можете використовувати numberOfItems (або будь-яке інше реактивне значення!), не турбуючись про те, що це призведе до повторного виконання навколишнього коду при змінах.

З іншого боку, сам ефект залишається реактивним. Код всередині ефекту використовує проп url, тому ефект буде перезапускатися після кожного повторного рендерингу з іншим url. Це, у свою чергу, викличе подію onVisit Effect Event.

У результаті ви будете викликати logVisit для кожної зміни адреси і завжди зчитуватимете останню версію numberOfItems. Однак, якщо numberOfItems зміниться сам по собі, це не призведе до повторного запуску коду.

const onVisit = useEffectEvent(() => {
    logVisit(url, numberOfItems);
  });

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

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

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

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

  useEffect(() => {
    setTimeout(() => {
      onVisit(url);
    }, 5000); // Delay logging visits
  }, [url]);

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

  useEffect(() => {
    logVisit(url, numberOfItems);
    // 🔴 Avoid suppressing the linter like this:
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [url]);
  // ...
}

import { useState, useEffect } from 'react';

export default function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [canMove, setCanMove] = useState(true);

  function handleMove(e) {
    if (canMove) {
      setPosition({ x: e.clientX, y: e.clientY });
    }
  }

  useEffect(() => {
    window.addEventListener('pointermove', handleMove);
    return () => window.removeEventListener('pointermove', handleMove);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <label>
        <input type="checkbox"
          checked={canMove}
          onChange={e => setCanMove(e.target.checked)}
        />
        The dot is allowed to move
      </label>
      <hr />
      <div style={{
        position: 'absolute',
        backgroundColor: 'pink',
        borderRadius: '50%',
        opacity: 0.6,
        transform: `translate(${position.x}px, ${position.y}px)`,
        pointerEvents: 'none',
        left: -20,
        top: -20,
        width: 40,
        height: 40,
      }} />
    </>
  );
}

body {
  height: 200px;
}

{
  "dependencies": {
    "react": "experimental",
    "react-dom": "experimental",
    "react-scripts": "latest"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

import { useState, useEffect } from 'react';
import { experimental_useEffectEvent as useEffectEvent } from 'react';

export default function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [canMove, setCanMove] = useState(true);

  const onMove = useEffectEvent(e => {
    if (canMove) {
      setPosition({ x: e.clientX, y: e.clientY });
    }
  });

  useEffect(() => {
    window.addEventListener('pointermove', onMove);
    return () => window.removeEventListener('pointermove', onMove);
  }, []);

  return (
    <>
      <label>
        <input type="checkbox"
          checked={canMove}
          onChange={e => setCanMove(e.target.checked)}
        />
        The dot is allowed to move
      </label>
      <hr />
      <div style={{
        position: 'absolute',
        backgroundColor: 'pink',
        borderRadius: '50%',
        opacity: 0.6,
        transform: `translate(${position.x}px, ${position.y}px)`,
        pointerEvents: 'none',
        left: -20,
        top: -20,
        width: 40,
        height: 40,
      }} />
    </>
  );
}

body {
  height: 200px;
}

Обмеження подій впливу

Можливості використання подій ефектів дуже обмежені:

• Викликайте їх лише зсередини ефектів.
• Ніколи не передавайте їх іншим компонентам або хукам.

Наприклад, не оголошуйте і не передавайте таку подію ефекту:

function Timer() {
  const [count, setCount] = useState(0);

  const onTick = useEffectEvent(() => {
    setCount(count + 1);
  });

  useTimer(onTick, 1000); // 🔴 Avoid: Passing Effect Events

  return <h1>{count}</h1>
}

function useTimer(callback, delay) {
  useEffect(() => {
    const id = setInterval(() => {
      callback();
    }, delay);
    return () => {
      clearInterval(id);
    };
  }, [delay, callback]); // Need to specify "callback" in dependencies
}

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

function Timer() {
  const [count, setCount] = useState(0);
  useTimer(() => {
    setCount(count + 1);
  }, 1000);
  return <h1>{count}</h1>
}

function useTimer(callback, delay) {
  const onTick = useEffectEvent(() => {
    callback();
  });

  useEffect(() => {
    const id = setInterval(() => {
      onTick(); // ✅ Good: Only called locally inside an Effect
    }, delay);
    return () => {
      clearInterval(id);
    };
  }, [delay]); // No need to specify "onTick" (an Effect Event) as a dependency
}

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