Сегодня я покажу вам фичу 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 ;
};

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


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


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

📲 Мы в MAX

✍️ @React_lib