Хук колбека (useCallback)

useCallback - Возвращает мемоизированный колбэк.

Мемоизация (запоминание, от англ. memoization) — в программировании сохранение результатов выполнения функций для предотвращения повторных вычислений. Это один из способов оптимизации, применяемый для увеличения скорости выполнения компьютерных программ. Перед вызовом функции проверяется, вызывалась ли функция ранее:

• если не вызывалась, то функция вызывается, и результат её выполнения сохраняется;

• если вызывалась, то используется сохранённый результат.

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

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

Пример:

function renderInput() {
  const [value, setValue] = useState();
  const [secondInput, setSecondInput] = useState();
  const callbackCach = useCallback(e => setValue(e.target.value), []);
  return (
    <div>
      <h1>Callbacks caching examples:</h1>

      <div className="part">
        <h3>Using useCallback hook:</h3>
        <Input onChange={callbackCach} />
        <p>Input value is: {value}</p>
      </div>

      <div className="part">
        <h3>Without useCallback hook:</h3>
        <Input onChange={e => setSecondInput(e.target.value)} />
        <p>Input value is: {secondInput}</p>
      </div>
    </div>
  );
}

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