Видалення залежностей ефектів

Щоб змінити залежності, змініть код

Ви могли помітити закономірність у вашому робочому процесі:

1. По-перше, ви змінюєте код вашого ефекту або спосіб оголошення реактивних значень.
2. Потім ви слідуєте за лінкером і налаштовуєте залежності, щоб вони відповідали зміненому коду.
3. Якщо вас не влаштовує список залежностей, ви можете повернутися до першого кроку (і знову змінити код).

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

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

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

import { useState, useEffect } from 'react';

export default function Timer() {
  const [count, setCount] = useState(0);
  const [increment, setIncrement] = useState(1);

  function onTick() {
	setCount(count + increment);
  }

  useEffect(() => {
    const id = setInterval(onTick, 1000);
    return () => clearInterval(id);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <h1>
        Counter: {count}
        <button onClick={() => setCount(0)}>Reset</button>
      </h1>
      <hr />
      <p>
        Every second, increment by:
        <button disabled={increment === 0} onClick={() => {
          setIncrement(i => i - 1);
        }}>–</button>
        <b>{increment}</b>
        <button onClick={() => {
          setIncrement(i => i + 1);
        }}>+</button>
      </p>
    </>
  );
}

button { margin: 10px; }

Видалення непотрібних залежностей

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

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

Щоб знайти правильне рішення, вам потрібно відповісти на кілька запитань про ваш ефект. Давайте пройдемося по них.

Цей код слід перенести в обробник подій?

Перше, про що вам слід подумати, - чи цей код взагалі має бути ефектом.

Уявіть собі форму. При відправленні ви встановлюєте змінну стану submitted у значення true. Вам потрібно відправити POST-запит і показати повідомлення. Ви помістили цю логіку всередину ефекту, який "реагує" на те, що submitted є true:

function Form() {
  const [submitted, setSubmitted] = useState(false);

  useEffect(() => {
    if (submitted) {
      // 🔴 Avoid: Event-specific logic inside an Effect
      post('/api/register');
      showNotification('Successfully registered!');
    }
  }, [submitted]);

  function handleSubmit() {
    setSubmitted(true);
  }

  // ...
}

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

function Form() {
  const [submitted, setSubmitted] = useState(false);
  const theme = useContext(ThemeContext);

  useEffect(() => {
    if (submitted) {
      // 🔴 Avoid: Event-specific logic inside an Effect
      post('/api/register');
      showNotification('Successfully registered!', theme);
    }
  }, [submitted, theme]); // ✅ All dependencies declared

  function handleSubmit() {
    setSubmitted(true);
  }  

  // ...
}

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

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

function Form() {
  const theme = useContext(ThemeContext);

  function handleSubmit() {
    // ✅ Good: Event-specific logic is called from event handlers
    post('/api/register');
    showNotification('Successfully registered!', theme);
  }  

  // ...
}

Тепер, коли код знаходиться в обробнику подій, він не є реактивним - тому буде виконуватися лише тоді, коли користувач надсилає форму. Дізнайтеся більше про вибір між обробниками подій та ефектами та як видалити непотрібні ефекти.

Ваш ефект виконує кілька непов'язаних між собою дій?

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

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

function ShippingForm({ country }) {
  const [cities, setCities] = useState(null);
  const [city, setCity] = useState(null);

  useEffect(() => {
    let ignore = false;
    fetch(`/api/cities?country=${country}`)
      .then(response => response.json())
      .then(json => {
        if (!ignore) {
          setCities(json);
        }
      });
    return () => {
      ignore = true;
    };
  }, [country]); // ✅ All dependencies declared

  // ...

Це гарний приклад добування даних у ефекті.Ви синхронізуєте стан cities з мережею згідно з пропсом country. Ви не можете зробити це в обробнику подій, оскільки вам потрібно отримати дані щойно буде показано ShippingForm і щоразу, коли змінюватиметься country (незалежно від того, яка взаємодія спричиняє це).

Тепер припустимо, що ви додаєте друге вікно вибору для районів міста, яке має отримати райони для поточно вибраного міста. Ви можете почати з додавання другого виклику fetch для списку районів всередині того самого ефекту:

function ShippingForm({ country }) {
  const [cities, setCities] = useState(null);
  const [city, setCity] = useState(null);
  const [areas, setAreas] = useState(null);

  useEffect(() => {
    let ignore = false;
    fetch(`/api/cities?country=${country}`)
      .then(response => response.json())
      .then(json => {
        if (!ignore) {
          setCities(json);
        }
      });
    // 🔴 Avoid: A single Effect synchronizes two independent processes
    if (city) {
      fetch(`/api/areas?city=${city}`)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setAreas(json);
          }
        });
    }
    return () => {
      ignore = true;
    };
  }, [country, city]); // ✅ All dependencies declared

  // ...

Втім, оскільки Effect тепер використовує змінну стану city, вам довелося додати city до списку залежностей. Це, у свою чергу, призвело до проблеми: коли користувач обирає інше місто, Effect повторно запускається і викликає fetchCities(country). Як наслідок, ви без потреби багато разів перезавантажуватимете список міст.

Проблема у цьому коді полягає у тому, що ви синхронізуєте дві різні непов'язані речі:

1. Ви хочете синхронізувати стан cities з мережею на основі country prop.
2. Ви хочете синхронізувати стан areas з мережею на основі стану city.

Розділити логіку на два ефекти, кожен з яких реагує на реквізит, з яким йому потрібно синхронізуватися:

function ShippingForm({ country }) {
  const [cities, setCities] = useState(null);
  useEffect(() => {
    let ignore = false;
    fetch(`/api/cities?country=${country}`)
      .then(response => response.json())
      .then(json => {
        if (!ignore) {
          setCities(json);
        }
      });
    return () => {
      ignore = true;
    };
  }, [country]); // ✅ All dependencies declared

  const [city, setCity] = useState(null);
  const [areas, setAreas] = useState(null);
  useEffect(() => {
    if (city) {
      let ignore = false;
      fetch(`/api/areas?city=${city}`)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setAreas(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [city]); // ✅ All dependencies declared

  // ...

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

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

Ви читаєте деякий стан для обчислення наступного стану?

Цей ефект оновлює змінну стану messages новоствореним масивом щоразу, коли надходить нове повідомлення:

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    connection.on('message', (receivedMessage) => {
      setMessages([...messages, receivedMessage]);
    });
    // ...

Він використовує змінну messages для створення нового масиву з усіма існуючими повідомленнями і додає нове повідомлення в кінці. Однак, оскільки повідомлення є реактивним значенням, яке зчитується ефектом, це має бути залежність:

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    connection.on('message', (receivedMessage) => {
      setMessages([...messages, receivedMessage]);
    });
    return () => connection.disconnect();
  }, [roomId, messages]); // ✅ All dependencies declared
  // ...

А створення повідомлень як залежності створює проблему.

Щоразу, коли ви отримуєте повідомлення, setMessages() компонент перезавантажується з новим масивом messages, який містить отримане повідомлення. Однак, оскільки цей ефект тепер залежить від messages, це призведе також до повторної синхронізації ефекту. Отже, кожне нове повідомлення змушуватиме чат перепідключатися. Користувачеві це не сподобається!

Щоб виправити проблему, не читайте повідомлення всередині ефекту. Натомість передайте функцію оновлення до setMessages:

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    connection.on('message', (receivedMessage) => {
      setMessages(msgs => [...msgs, receivedMessage]);
    });
    return () => connection.disconnect();
  }, [roomId]); // ✅ All dependencies declared
  // ...

Зверніть увагу, що ваш Effect тепер взагалі не читає змінну messages. Вам потрібно лише передати функцію оновлення на зразок msgs => [...msgs, receivedMessage]. React помістить вашу функцію оновлення в чергу і надасть їй аргумент msgs під час наступного рендеру. Таким чином, самому ефекту більше не потрібно залежати від messages. У результаті цього виправлення отримання повідомлення чату більше не призведе до перепідключення чату.

Хочете прочитати значення, не "реагуючи" на його зміни?

Припустимо, що ви хочете відтворювати звук, коли користувач отримує нове повідомлення, якщо isMuted не є істинним:

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  const [isMuted, setIsMuted] = useState(false);

  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    connection.on('message', (receivedMessage) => {
      setMessages(msgs => [...msgs, receivedMessage]);
      if (!isMuted) {
        playSound();
      }
    });
    // ...

Оскільки ваш ефект тепер використовує isMuted у своєму коді, вам слід додати його до залежностей:

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  const [isMuted, setIsMuted] = useState(false);

  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    connection.on('message', (receivedMessage) => {
      setMessages(msgs => [...msgs, receivedMessage]);
      if (!isMuted) {
        playSound();
      }
    });
    return () => connection.disconnect();
  }, [roomId, isMuted]); // ✅ All dependencies declared
  // ...

Проблема полягає в тому, що кожного разу, коли змінюється isMuted (наприклад, коли користувач натискає перемикач "Вимкнути звук"), ефект повторно синхронізується і знову підключається до чату. Це не бажаний користувацький досвід! (У цьому прикладі навіть вимкнення лінкера не допоможе - якщо ви це зробите, isMuted "застрягне" зі старим значенням).)

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

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

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  const [isMuted, setIsMuted] = useState(false);

  const onMessage = useEffectEvent(receivedMessage => {
    setMessages(msgs => [...msgs, receivedMessage]);
    if (!isMuted) {
      playSound();
    }
  });

  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    connection.on('message', (receivedMessage) => {
      onMessage(receivedMessage);
    });
    return () => connection.disconnect();
  }, [roomId]); // ✅ All dependencies declared
  // ...

За допомогою подій ефекту ви можете розділити ефект на реактивні частини (які мають "реагувати" на реактивні значення, як-от roomId та їхні зміни) та нереактивні частини (які лише зчитують їхні останні значення, як-от onMessage зчитує isMuted). Тепер, коли ви читаєте isMuted всередині події ефекту, вона не обов'язково має бути залежною від вашого ефекту.Внаслідок цього чат не буде повторно з'єднуватися, коли ви вмикаєте або вимикаєте параметр "Вимкнено", що вирішує початкову проблему!

Обгортання обробника події з пропсів

Ви можете зіткнутися з подібною проблемою, якщо ваш компонент отримує обробник події як проп:

function ChatRoom({ roomId, onReceiveMessage }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    connection.on('message', (receivedMessage) => {
      onReceiveMessage(receivedMessage);
    });
    return () => connection.disconnect();
  }, [roomId, onReceiveMessage]); // ✅ All dependencies declared
  // ...

Це працює і для функцій:

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

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

  useEffect(() => {
    function createOptions() {
      return {
        serverUrl: serverUrl,
        roomId: roomId
      };
    }

    const options = createOptions();
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ All dependencies declared
  // ...

Ви можете написати власні функції для групування частин логіки всередині ефекту. Якщо ви також оголосите їх всередині вашого Ефекту, вони не є реактивними значеннями, а отже, їм не потрібно бути залежними від вашого Ефекту.

Читати примітивні значення з об'єктів

Іноді ви можете отримати об'єкт з пропсів:

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

  useEffect(() => {
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [options]); // ✅ All dependencies declared
  // ...

Ризик полягає у тому, що батьківський компонент створить об'єкт під час рендерингу:

<ChatRoom
  roomId={roomId}
  options={{
    serverUrl: serverUrl,
    roomId: roomId
  }}
/>

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

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

  const { roomId, serverUrl } = options;
  useEffect(() => {
    const connection = createConnection({
      roomId: roomId,
      serverUrl: serverUrl
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ✅ All dependencies declared
  // ...

Логіка трохи повторюється (ви читаєте деякі значення з об'єкта поза ефектом, а потім створюєте об'єкт з тими ж значеннями всередині ефекту). Але вона дуже чітко показує, від якої інформації залежить ваш ефект фактично. Якщо об'єкт буде ненавмисно створено батьківським компонентом, чат не відновить з'єднання. Однак, якщо options.roomId або options.serverUrl дійсно відрізняються, чат буде перепідключено.

Обчислення примітивних значень з функцій

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

<ChatRoom
  roomId={roomId}
  getOptions={() => {
    return {
      serverUrl: serverUrl,
      roomId: roomId
    };
  }}
/>

Щоб уникнути створення залежності (і повторного підключення при повторному рендерингу), викликайте його поза ефектом. Це дасть вам значення roomId та serverUrl, які не є об'єктами, і які ви можете прочитати зсередини ефекту:

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

  const { roomId, serverUrl } = getOptions();
  useEffect(() => {
    const connection = createConnection({
      roomId: roomId,
      serverUrl: serverUrl
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ✅ All dependencies declared
  // ...

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