Как сделать так, чтобы функция не ломала мемоизацию?

Решение проблемы нестабильных функций — управление ссылками.

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

useCallback мемоизирует функцию:

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

Теперь:

• ссылка на функцию стабильна

• функция меняется только при изменении id

• React.memo может корректно работать

Как выбрать зависимости

В массив зависимостей нужно включать:

• все переменные из внешнего scope

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

Пропуск зависимостей приводит к:

• устаревшим данным

• логическим ошибкам

Когда useCallback не нужен

Не стоит использовать useCallback, если:

• компонент не мемоизирован

• функция не передаётся в дочерние компоненты

• оптимизация не требуется

Цена мемоизации

useCallback:

• хранит функцию в памяти

• требует сравнения зависимостей

• может быть дороже, чем пересоздание функции

Вывод

Чтобы функция не ломала мемоизацию, нужно стабилизировать её ссылку с помощью useCallback. Этот хук полезен только в сочетании с React.memo и дорогими компонентами.