Сегодня я покажу вам фичу React, которую многие недооценивают — useCallback. Часто его ...
Сегодня я покажу вам фичу 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 не менялся внутри него. ✍️ @React_lib