Что такое useCallback?

useCallback — хук, который мемоизирует функцию: возвращает одну и ту же ссылку на функцию между рендерами, пока не изменились её зависимости.

Сигнатура

const handleClick = useCallback(() => {
  console.log(value);
}, [value]);

• Первый аргумент — функция, которую нужно «зафиксировать».
• Второй — массив зависимостей: новая функция создаётся только когда что-то из списка изменилось.

Какую проблему решает

При каждом рендере компонента все объявленные внутри функции создаются заново — это новые ссылки. Из-за этого:

• дочерний компонент, обёрнутый в React.memo, всё равно перерендеривается, потому что проп-функция «изменилась»;
• useEffect, у которого функция в зависимостях, срабатывает на каждый рендер.

const Parent = () => {
  const [count, setCount] = useState(0);

  const handleSelect = useCallback((id) => {
    console.log('selected', id);
  }, []);

  return <List onSelect={handleSelect} />; // List в React.memo не перерендерится
};

Нюансы и частые ошибки

• useCallback(fn, deps) — это эквивалент useMemo(() => fn, deps).
• Без React.memo на дочернем компоненте мемоизация функции чаще всего бессмысленна — компонент перерендерится в любом случае.
• Забытая зависимость приводит к «устаревшему замыканию» (stale closure): функция видит старые значения состояния.
• Оборачивать каждую функцию в useCallback не нужно — сама мемоизация тоже имеет цену.

Коротко для собеседования

useCallback сохраняет ссылку на функцию между рендерами, пока не изменились зависимости. Нужен, чтобы не ломать мемоизацию дочерних компонентов (React.memo) и не триггерить лишние срабатывания эффектов, где функция стоит в зависимостях.