useMemo

Пропуск повторного рендерингу компонентів

У деяких випадках useMemo також може допомогти вам оптимізувати продуктивність повторного рендерингу дочірніх компонентів. Щоб проілюструвати це, скажімо, компонент TodoList передає visibleTodos як проп дочірньому компоненту List:

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    <div className={theme}>
      <List items={visibleTodos} />
    </div>
  );
}

Ви помітили, що перемикання пропсу theme на мить призупиняє роботу програми, але якщо ви видалите <List /> з вашого JSX, то програма працює швидко. Це говорить про те, що варто спробувати оптимізувати компонент List.

За замовчуванням, коли компонент перерендериться, React рекурсивно перерендерить усі його дочірні елементи. Ось чому, коли TodoList перерендериться з іншою темою, компонент List також перерендериться. Це добре для компонентів, які не потребують багато обчислень для повторного рендерингу. Але якщо ви переконалися, що повторний рендер повільний, ви можете вказати List пропустити повторний рендер, коли його пропси такі ж, як і під час останнього рендеру, обернувши його у memo:

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

З цією зміною List пропустить повторний рендеринг, якщо всі його пропси будуть такими самими, як і під час останнього рендерингу. Ось де кешування обчислень стає важливим! Припустимо, що ви обчислили visibleTodos без useMemo:

export default function TodoList({ todos, tab, theme }) {
  // Every time the theme changes, this will be a different array...
  const visibleTodos = filterTodos(todos, tab);
  return (
    <div className={theme}>
      {/* ... so List's props will never be the same, and it will re-render every time */}
      <List items={visibleTodos} />
    </div>
  );
}

У наведеному вище прикладі функція filterTodos завжди створює різний масив, подібно до того, як об'єктний літерал {} завжди створює новий об'єкт. Зазвичай це не було б проблемою, але це означає, що пропси List ніколи не будуть однаковими, і ваша memo оптимізація не працюватиме. Ось де useMemo стає у нагоді:

export default function TodoList({ todos, tab, theme }) {
  // Tell React to cache your calculation between re-renders...
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab] // ...so as long as these dependencies don't change...
  );
  return (
    <div className={theme}>
      {/* ...List will receive the same props and can skip re-rendering */}
      <List items={visibleTodos} />
    </div>
  );
}

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

export default function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  const children = useMemo(() => <List items={visibleTodos} />, [visibleTodos]);
  return (
    <div className={theme}>
      {children}
    </div>
  );
}

Запам'ятовування залежності іншого хука

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

function Dropdown({ allItems, text }) {
  const searchOptions = { matchMode: 'whole-word', text };

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // 🚩 Caution: Dependency on an object created in the component body
  // ...

Така залежність від об'єкта суперечить сенсу запам'ятовування. При повторному рендерингу компонента весь код безпосередньо у тілі компонента виконується знову. Рядки коду, що створюють об'єкт searchOptions, також будуть виконуватися при кожному повторному рендерингу. Оскільки searchOptions є залежністю від вашого виклику useMemo, а він щоразу інший, React знає, що залежності різні, і щоразу переобчислює searchItems.

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

function Dropdown({ allItems, text }) {
  const searchOptions = useMemo(() => {
    return { matchMode: 'whole-word', text };
  }, [text]); // ✅ Only changes when text changes

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // ✅ Only changes when allItems or searchOptions changes
  // ...

У наведеному вище прикладі, якщо текст не змінився, об'єкт searchOptions також не зміниться. Однак, ще кращим виправленням є переміщення оголошення об'єкта searchOptions всередину функції обчислення useMemo:

function Dropdown({ allItems, text }) {
  const visibleItems = useMemo(() => {
    const searchOptions = { matchMode: 'whole-word', text };
    return searchItems(allItems, searchOptions);
  }, [allItems, text]); // ✅ Only changes when allItems or text changes
  // ...

Тепер ваше обчислення залежить безпосередньо від тексту (який є рядком і не може "випадково" стати іншим).

Запам'ятовування функції

Припустімо, що компонент Form обгорнуто у memo. Ви хочете передати йому функцію як проп:

export default function ProductPage({ productId, referrer }) {
  function handleSubmit(orderDetails) {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }

  return <Form onSubmit={handleSubmit} />;
}

Так само, як {} створює інший об'єкт, оголошення функцій на кшталт function() {} та вирази на кшталт () => {} створюють іншу функцію при кожному повторному рендерингу. Саме по собі створення нової функції не є проблемою. Цього не варто уникати! Однак, якщо компонент Form запам'ятовується, ймовірно, ви хочете пропустити його повторний рендеринг, якщо жодні пропси не змінилися. Проп, який завжди відрізняється, не матиме сенсу для запам'ятовування.

Щоб запам'ятати функцію з useMemo, ваша обчислювальна функція повинна повернути іншу функцію:

export default function Page({ productId, referrer }) {
  const handleSubmit = useMemo(() => {
    return (orderDetails) => {
      post('/product/' + productId + '/buy', {
        referrer,
        orderDetails
      });
    };
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

Це виглядає незграбно! Запам'ятовування функцій є досить поширеним явищем, і React має вбудований хук спеціально для цього. Обгортайте ваші функції у useCallback замість useMemo, щоб уникнути необхідності писати додаткову вкладену функцію:

export default function Page({ productId, referrer }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

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

Налагодження

Мої обчислення запускаються двічі під час кожного повторного рендерингу

У Суворому режимі React викликатиме деякі ваші функції двічі замість одного:

function TodoList({ todos, tab }) {
  // This component function will run twice for every render.

  const visibleTodos = useMemo(() => {
    // This calculation will run twice if any of the dependencies change.
    return filterTodos(todos, tab);
  }, [todos, tab]);

  // ...

Це очікувано і не повинно зламати ваш код.

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

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

const visibleTodos = useMemo(() => {
    // 🚩 Mistake: mutating a prop
    todos.push({ id: 'last', text: 'Go for a walk!' });
    const filtered = filterTodos(todos, tab);
    return filtered;
  }, [todos, tab]);

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

const visibleTodos = useMemo(() => {
    const filtered = filterTodos(todos, tab);
    // ✅ Correct: mutating an object you created during the calculation
    filtered.push({ id: 'last', text: 'Go for a walk!' });
    return filtered;
  }, [todos, tab]);

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

Також ознайомтеся з настановами щодо оновлення об'єктів та оновлення масивів без мутації.

Мій виклик useMemo мав би повернути об'єкт, але повертає undefined

Цей код не працює:

// 🔴 You can't return an object from an arrow function with () => {
  const searchOptions = useMemo(() => {
    matchMode: 'whole-word',
    text: text
  }, [text]);

У JavaScript () => { починає тіло функції стрілки, тому дужка { не є частиною вашого об'єкта. Тому вона не повертає об'єкт і призводить до помилок. Ви можете виправити це, додавши дужки на зразок ({ і }):

// This works, but is easy for someone to break again
  const searchOptions = useMemo(() => ({
    matchMode: 'whole-word',
    text: text
  }), [text]);

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

Щоб уникнути цієї помилки, напишіть інструкцію return явно:

// ✅ This works and is explicit
  const searchOptions = useMemo(() => {
    return {
      matchMode: 'whole-word',
      text: text
    };
  }, [text]);

Кожного разу, коли мій компонент рендерить, обчислення в useMemo запускаються повторно

Переконайтеся, що ви вказали масив залежностей як другий аргумент!

Якщо ви забудете масив залежностей, useMemo щоразу запускатиме обчислення наново:

function TodoList({ todos, tab }) {
  // 🔴 Recalculates every time: no dependency array
  const visibleTodos = useMemo(() => filterTodos(todos, tab));
  // ...

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

function TodoList({ todos, tab }) {
  // ✅ Does not recalculate unnecessarily
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...

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

const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  console.log([todos, tab]);

Після цього ви можете клацнути правою кнопкою миші на масивах з різних рендерингів у консолі і вибрати "Зберегти як глобальну змінну" для обох. Якщо припустити, що перший масив було збережено як temp1, а другий - як temp2, ви можете скористатися консоллю браузера, щоб перевірити, чи кожна залежність в обох масивах однакова:

Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays?
Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the arrays?
Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ...

Якщо ви знайдете залежність, яка порушує запам'ятовування, або знайдіть спосіб вилучити її, або запам'ятайте її також.

Мені потрібно викликати useMemo для кожного елемента списку у циклі, але це не дозволено

Припустимо, що компонент Chart обгорнуто у memo. Ви хочете пропустити повторний рендеринг кожного Chart у списку при повторному рендерингу компонента ReportList. Однак, ви не можете викликати useMemo у циклі:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item => {
        // 🔴 You can't call useMemo in a loop like this:
        const data = useMemo(() => calculateReport(item), [item]);
        return (
          <figure key={item.id}>
            <Chart data={data} />
          </figure>
        );
      })}
    </article>
  );
}

Натомість, витягуйте компонент для кожного елемента та запам'ятовуйте дані для окремих елементів:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item =>
        <Report key={item.id} item={item} />
      )}
    </article>
  );
}

function Report({ item }) {
  // ✅ Call useMemo at the top level:
  const data = useMemo(() => calculateReport(item), [item]);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
}

Як варіант, ви можете видалити useMemo і натомість обгорнути Report у memo. Якщо проп item не буде змінено, Report пропустить повторний рендеринг, тому Chart також пропустить повторний рендеринг:

function ReportList({ items }) {
  // ...
}

const Report = memo(function Report({ item }) {
  const data = calculateReport(item);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
});