Блог

Мне действительно трудно решить, использовать useCallback или нет. Если нет дорогостоящей функции, я должен просто опустить ее? (Но я не знаю, является ли функция дорогой или нет …)

Или, когда компонент часто повторно отображается, я мог бы обернуть каждую функцию в нем с помощью useCallback?

Есть идеи?

Вы можете рассмотреть следующий вариант использования useCallback

Перехват useCallback от React может быть использован для оптимизации поведения рендеринга компонентов вашей функции React.

Обычно useCallback очень полезен при передаче реквизитов обратного вызова дочерним компонентам.

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

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

Допустим, у вас есть компонент, который отображает большой список элементов.

 import React from 'react';
import useSearch from './fetch-items';

function ListItem({ value, handleClick }) {
  const items = useSearch(value);

  const itemToElement = item => <div onClick={handleClick}>{item}</div>;

  return <div>{items.map(itemToElement)}</div>;
}

export default React.memo(ListItem);
  

Здесь ListItem отображает список элементов. Давайте представим, что список может быть большим, возможно, несколько тысяч элементов. Чтобы сохранить повторный рендеринг списка, вы переносите его в React.memo.

Родительский компонент ListItem должен предоставлять функцию-обработчик при нажатии на элемент.

 import React, { useCallback } from 'react';

export default function ParentComponent({ value }) {
  const handleClick = useCallback(item => {
    console.log('List item is clicked', item);
  }, [value]);

  return (
    <ListItem
      value={value}
      handleClick={handleClick}
    />
  );
}
  

Обратный вызов handleClick запоминается useCallback(). Пока переменная term остается неизменной, useCallback() возвращает тот же экземпляр функции.

Даже если по какой-либо причине компонент ParentComponent повторно отображает, handleClick остается тем же самым и не нарушает запоминание ListItem.

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