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

Question

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

YeaHub · Accepted Answer

Решение проблемы нестабильных функций — управление ссылками.Использование useCallbackuseCallback мемоизирует функцию:const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);
Теперь:ссылка на функцию стабильнафункция меняется только при изменении idReact.memo может корректно работатьКак выбрать зависимостиВ массив зависимостей нужно включать:все переменные из внешнего scopeзначения, используемые внутри функцииПропуск зависимостей приводит к:устаревшим даннымлогическим ошибкамКогда useCallback не нуженНе стоит использовать useCallback, если:компонент не мемоизированфункция не передаётся в дочерние компонентыоптимизация не требуетсяЦена мемоизацииuseCallback:хранит функцию в памятитребует сравнения зависимостейможет быть дороже, чем пересоздание функцииВыводЧтобы функция не ломала мемоизацию, нужно стабилизировать её ссылку с помощью useCallback. Этот хук полезен только в сочетании с React.memo и дорогими компонентами.