Сегодня я покажу вам фичу React, которую многие недооценивают — useCallback. Часто его либо используют слишком много, либо вообще не используют. А ведь он может здорово помочь оптимизировать ререндеры, особенно когда дело касается передачи функций в дочерние компоненты.


Что делает useCallback?

Он кэширует функцию, возвращая ту же ссылку, пока зависимости не изменятся.

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

Без него, при каждом ререндере компонента создаётся новая функция, и если вы передаёте её в props, это может триггерить лишние ререндеры у дочерних компонентов.



Где реально нужен useCallback?

- Когда функция передаётся в мемоизированный компонент (React.memo)
- Когда функция используется в useEffect, useMemo или других хук-эффектах
- Когда вы работаете с большими списками, и каждый элемент зависит от onClick или другого хендлера



Где не нужен?

- В простых компонентах без глубоких вложенностей
- Когда вы не передаёте функцию в другие компоненты
- Когда оптимизация важна меньше, чем читаемость



Мини-пример

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

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <Child onClick={increment} />;
};

const Child = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
});

Если бы мы не использовали useCallback, Child бы перерендеривался каждый раз, даже если count не менялся внутри него.


Пишите в комментах, как часто вы используете useCallback — помогает или только мешает?


✍️ @React_lib