useCallback

const cachedFn = useCallback(fn, dependencies)

• Справочник
  • useCallback(fn, dependencies)
• Использование
  • Пропуск повторного рендеринга компонентов
  • Обновление состояния из мемоизированного колбэка
  • Предотвращение слишком частого срабатывания эффекта
  • Оптимизация пользовательского хука
• Устранение неполадок
  • Каждый раз, когда мой компонент рендерится, useCallback возвращает другую функцию
  • Мне нужно вызвать useCallback для каждого элемента списка в цикле, но это не разрешено

Справочник

useCallback(fn, dependencies)

Вызовите useCallback на верхнем уровне вашего компонента, чтобы кешировать функцию между повторными рендерами:

import { useCallback } from 'react';

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

Больше примеров ниже.

Параметры

• fn: Значение функции, которую вы хотите кешировать. Она может принимать любые аргументы и возвращать любые значения. React вернёт (но не вызовет!) вашу функцию при первом рендере. При последующих рендерах React даст вам ту же функцию, если dependencies не изменились. В противном случае он вернёт функцию, переданную при текущем рендере, и сохранит её для возможного повторного использования. React не вызывает вашу функцию. Он возвращает её вам, чтобы вы могли решить, когда и как её вызывать.

• dependencies: Список всех реактивных значений, на которые ссылается код fn. К реактивным значениям относятся пропсы, состояние и все переменные и функции, объявленные непосредственно в теле компонента. Если ваш линтер настроен для использования с React, он проверит, что каждое реактивное значение правильно указано как зависимость. Список зависимостей должен иметь постоянное количество элементов и быть записан примерно так: [dep1, dep2, dep3]. React будет сравнивать каждую зависимость с её предыдущим значением, используя алгоритм сравнения Object.is.

Возвращаемое значение

При первом рендере useCallback возвращает функцию fn, которую вы передали.

Во время последующих рендеров он либо возвращает уже сохранённую функцию fn с последнего рендера (если зависимости не изменились), либо возвращает функцию fn, переданную при текущем рендере.

Предостережения

• useCallback — это хук, поэтому вы можете вызывать его только на верхнем уровне вашего компонента или собственных хуков. Вы не можете вызывать его внутри циклов или условий. Если вам это нужно, выделите компонент и перенесите состояние туда.
• React не выбрасывает кешированную функцию без веской причины. Например, в режиме разработки React сбрасывает кеш при изменении файла вашего компонента. В разработке и в продакшене кеш сбрасывается, если ваш компонент приостановлен во время начальной загрузки. В будущем React может добавить функции, которые будут использовать сброс кеша — например, встроенная поддержка виртуализированных списков может потребовать сброса кеша для элементов, которые выходят за пределы области видимости. Это должно соответствовать вашим ожиданиям при использовании useCallback для оптимизации производительности. В противном случае, использование состояния или рефа могут быть более подходящими.

Использование

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

Когда вы оптимизируете производительность рендеринга, иногда нужно кешировать функции, которые вы передаёте дочерним компонентам. Сначала рассмотрим синтаксис, как это сделать, а затем посмотрим, в каких случаях это полезно.

Чтобы кешировать функцию между рендерами вашего компонента, оберните её в хук useCallback:

import { useCallback } from 'react';

function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);
  // ...

Вам нужно передать две вещи в useCallback:

1. Функцию, которую вы хотите кешировать между повторными рендерами.
2. Список зависимостей, включающий каждое значение внутри вашего компонента, которое используется внутри функции.

При первом рендере возвращаемая функция из useCallback будет той функцией, которую вы передали.

При последующих рендерах React сравнит зависимости с теми, которые вы передали при предыдущем рендере. Если ни одна из зависимостей не изменилась (сравнение производится с помощью Object.is), useCallback вернёт ту же функцию, что и раньше. В противном случае, useCallback вернёт функцию, переданную при текущем рендере.

Другими словами, useCallback кеширует функцию между повторными рендерами до тех пор, пока её зависимости не изменятся.

Давайте рассмотрим пример, чтобы понять, когда это полезно.

Предположим, вы передаёте функцию handleSubmit из компонента ProductPage в компонент ShippingForm:

function ProductPage({ productId, referrer, theme }) {
  // ...
  return (
    <div className={theme}>
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );

Вы заметили, что при переключении пропа theme приложение на мгновение зависает, но если убрать <ShippingForm /> из вашего JSX, оно работает быстро. Это говорит о том, что стоит попытаться оптимизировать компонент ShippingForm.

По умолчанию, когда компонент повторно рендерится, React рекурсивно отрендерит снова все его дочерние компоненты. Поэтому, когда ProductPage рендерится с другим theme, компонент ShippingForm тоже повторно рендерится. Это нормально для компонентов, которые не требуют больших вычислений при рендере. Но если повторный рендер медленный, можно сказать ShippingForm пропустить повторный рендеринг, если его пропсы такие же, как при последнем рендере, обернув его в memo:

import { memo } from 'react';

const ShippingForm = memo(function ShippingForm({ onSubmit }) {
  // ...
});

С этим изменением ShippingForm будет пропускать повторный рендер, если все его пропсы останутся такими же , как при последнем рендере. Вот когда кеширование функции становится важным! Предположим, вы определили handleSubmit без useCallback:

function ProductPage({ productId, referrer, theme }) {
  // Каждый раз, когда тема изменяется, это будет другая функция...
  function handleSubmit(orderDetails) {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }
  
  return (
    <div className={theme}>
      {/* ... таким образом, пропсы ShippingForm никогда не будут одинаковыми, и он будет повторно рендериться каждый раз. */}
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );
}

В JavaScript function () {} or () => {} всегда создаёт новую функцию, так же как литерал объекта {} всегда создаёт новый объект. Обычно это не проблема, но это означает, что пропсы ShippingForm никогда не будут одинаковыми, и ваша оптимизация с memo не сработает. Здесь на помощь приходит useCallback:

function ProductPage({ productId, referrer, theme }) {
  // Сообщите React, чтобы кешировать вашу функцию между повторными рендерами...
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]); // // ...пока эти зависимости не изменятся...

  return (
    <div className={theme}>
      {/* ...ShippingForm будет получать те же пропсы и может пропускать повторный рендер */}
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );
}

Оборачивая handleSubmit в useCallback, вы гарантируете, что это одна и та же функция между повторными рендерами (пока зависимости не изменятся). Вам не нужно оборачивать функцию в useCallback, если на это нет конкретной причины. В этом примере причина в том, что вы передаёте её в компонент, обёрнутый в memo, что позволяет ему пропускать повторные рендеры. Есть и другие причины использовать useCallback, которые описаны далее на этой странице.

import { useMemo, useCallback } from 'react';

function ProductPage({ productId, referrer }) {
  const product = useData('/product/' + productId);

  const requirements = useMemo(() => { // // Вызывает вашу функцию и кеширует её результат
    return computeRequirements(product);
  }, [product]);

  const handleSubmit = useCallback((orderDetails) => { // Кеширует саму вашу функцию
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

  return (
    <div className={theme}>
      <ShippingForm requirements={requirements} onSubmit={handleSubmit} />
    </div>
  );
}

// Упрощённая реализация (внутри React)
function useCallback(fn, dependencies) {
  return useMemo(() => fn, dependencies);
}

Обновление состояния из мемоизированного колбэка

Иногда может потребоваться обновить состояние на основе предыдущего состояния из мемоизированного колбэка.

Эта функция handleAddTodo указывает todos как зависимость, потому что она вычисляет новые todos:

function TodoList() {
  const [todos, setTodos] = useState([]);

  const handleAddTodo = useCallback((text) => {
    const newTodo = { id: nextId++, text };
    setTodos([...todos, newTodo]);
  }, [todos]);
  // ...

Обычно вы хотите, чтобы у мемоизированных функций было как можно меньше зависимостей. Когда вы читаете состояние только для вычисления следующего состояния, вы можете удалить эту зависимость, передавая функцию обновления:

function TodoList() {
  const [todos, setTodos] = useState([]);

  const handleAddTodo = useCallback((text) => {
    const newTodo = { id: nextId++, text };
    setTodos(todos => [...todos, newTodo]);
  }, []); // ✅ Нет необходимости в зависимости от todos
  // ...

Здесь, вместо того чтобы делать todos зависимостью и считывать его внутри, вы передаёте React инструкцию о том, как обновить состояние (todos => [...todos, newTodo]). Подробнее о функциях обновления.

Предотвращение слишком частого срабатывания эффекта

Иногда может понадобиться вызвать функцию из эффекта:

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

  function createOptions() {
    return {
      serverUrl: 'https://localhost:1234',
      roomId: roomId
    };
  }

  useEffect(() => {
    const options = createOptions();
    const connection = createConnection();
    connection.connect();
    // ...

Это создаёт проблему. Каждое реактивное значение должно быть объявлено как зависимость вашего эффекта. Однако, если вы объявите createOptions как зависимость, это приведёт к постоянному повторному подключению эффекта к чат-комнате:

  useEffect(() => {
    const options = createOptions();
    const connection = createConnection();
    connection.connect();
    return () => connection.disconnect();
  }, [createOptions]); // 🔴 Проблема: Эта зависимость изменяется при каждом рендере
  // ...

Чтобы решить эту проблему, вы можете обернуть функцию, которую нужно вызвать из эффекта, в useCallback:

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

  const createOptions = useCallback(() => {
    return {
      serverUrl: 'https://localhost:1234',
      roomId: roomId
    };
  }, [roomId]); // ✅ Изменяется только при изменении roomId

  useEffect(() => {
    const options = createOptions();
    const connection = createConnection();
    connection.connect();
    return () => connection.disconnect();
  }, [createOptions]); // ✅ Изменяется только при изменении createOptions
  // ...

Это гарантирует, что функция createOptions остаётся той же между рендерами, если roomId не изменился. Однако, ещё лучше убрать необходимость в зависимости от функции. Переместите свою функцию внутрь эффекта:

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

  useEffect(() => {
    function createOptions() { // ✅ Нет необходимости в useCallback или зависимостях функции!
      return {
        serverUrl: 'https://localhost:1234',
        roomId: roomId
      };
    }

    const options = createOptions();
    const connection = createConnection();
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ Изменяется только при изменении roomId
  // ...

Теперь ваш код проще и не нуждается в useCallback. Узнайте больше об удалении зависимостей эффекта.

Оптимизация пользовательского хука

Если вы пишете пользовательский хук, рекомендуется оборачивать любые функции, которые он возвращает, в useCallback:

function useRouter() {
  const { dispatch } = useContext(RouterStateContext);

  const navigate = useCallback((url) => {
    dispatch({ type: 'navigate', url });
  }, [dispatch]);

  const goBack = useCallback(() => {
    dispatch({ type: 'back' });
  }, [dispatch]);

  return {
    navigate,
    goBack,
  };
}

Это гарантирует, что потребители вашего хука могут оптимизировать свой код при необходимости.

Устранение неполадок

Каждый раз, когда мой компонент рендерится, useCallback возвращает другую функцию

Убедитесь, что вы указали массив зависимостей в качестве второго аргумента!

Если вы забудете массив зависимостей, useCallback будет возвращать новую функцию каждый раз:

function ProductPage({ productId, referrer }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }); // 🔴 Возвращает новую функцию каждый раз: нет массива зависимостей
  // ...

Вот исправленная версия с передачей массива зависимостей в качестве второго аргумента:

function ProductPage({ productId, referrer }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]); // ✅ Не возвращает новую функцию без необходимости
  // ...

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

  const handleSubmit = useCallback((orderDetails) => {
    // ..
  }, [productId, referrer]);

  console.log([productId, referrer]);

Вы можете щёлкнуть правой кнопкой мыши на массивах из разных рендеров в консоли и выбрать “Store as global variable” для обоих. Предположим, первый сохранён как temp1 , а второй как temp2. Затем вы можете использовать консоль браузера, чтобы проверить, являются ли каждая зависимость в обоих массивах одинаковыми:

Object.is(temp1[0], temp2[0]); // Первая зависимость одинаковая в обоих массивах?
Object.is(temp1[1], temp2[1]); // Вторая зависимость одинаковая в обоих массивах?
Object.is(temp1[2], temp2[2]); // ... и так далее для каждой зависимости ...

Когда вы найдёте зависимость, нарушающую мемоизацию, либо найдите способ удалить её, либо мемоизируйте её также.

Мне нужно вызвать useCallback для каждого элемента списка в цикле, но это не разрешено

Предположим, что компонент Chart обёрнут в memo. Вы хотите пропустить повторный рендеринг каждого Chart в списке, когда компонент ReportList рендерится заново. Однако вы не можете вызывать useCallback в цикле:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item => {
        // 🔴 Вы не можете вызывать useCallback в цикле вот так:
        const handleClick = useCallback(() => {
          sendReport(item)
        }, [item]);

        return (
          <figure key={item.id}>
            <Chart onClick={handleClick} />
          </figure>
        );
      })}
    </article>
  );
}

Вместо этого выделите компонент для отдельного элемента и поместите useCallback там:

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

function Report({ item }) {
  // ✅ Вызовите useCallback на верхнем уровне:
  const handleClick = useCallback(() => {
    sendReport(item)
  }, [item]);

  return (
    <figure>
      <Chart onClick={handleClick} />
    </figure>
  );
}

Альтернативно, вы можете убрать useCallback в последнем фрагменте кода и вместо этого обернуть Report в memo. Если проп item не изменяется, Report пропустит повторный рендеринг, поэтому Chart также пропустит повторный рендеринг:

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

const Report = memo(function Report({ item }) {
  function handleClick() {
    sendReport(item);
  }

  return (
    <figure>
      <Chart onClick={handleClick} />
    </figure>
  );
});