O que é useCallback?
Definição
Hook do React que memoriza uma função callback entre renders, retornando a mesma referência enquanto suas dependências não mudam. Evita recriação desnecessária de funções a cada render.
É útil ao passar callbacks para componentes filhos otimizados com React.memo ou como dependência de useEffect, prevenindo renders e efeitos desnecessários.
Exemplo Prático
TypeScript
const Counter = ({ onIncrement }: { onIncrement: () => void }) => {
return <button onClick={onIncrement}>+</button>;
};
const Parent = () => {
const [count, setCount] = useState(0);
const handleIncrement = useCallback(() => {
setCount(prev => prev + 1);
}, []);
return <Counter onIncrement={handleIncrement} />;
};Quer ver useCallback em ação em projetos reais?
Ver artigos sobre useCallback