⚛️ Dominando os React Hooks: useCallback
Quando uma aplicação React sofre com renderizações ou chamadas desnecessárias, o useCallback pode ajudar a melhorar a performance. Mas seu uso deve ter um motivo claro: ele é uma ferramenta de otimização, não algo para aplicar em todas as funções.
🧠 O que é o useCallback?
O useCallback permite armazenar em cache a definição de uma função entre renderizações. Enquanto suas dependências não mudarem, o React pode reutilizar a mesma referência da função.
🔄 Por que isso importa?
Em JavaScript, uma função criada durante uma renderização é uma nova referência. Isso pode ser relevante quando essa função é passada como prop para um componente otimizado ou utilizada como dependência de outro Hook.
No cenário de uma aplicação que busca dados de uma API, uma função responsável pelo fetch era recriada sempre que um campo de texto era alterado. Como essa função era uma dependência de um efeito, a API acabava sendo chamada novamente sem necessidade.
Com o useCallback, a função pode ser recriada somente quando uma dependência relevante, como o tipo de recurso, mudar. Assim, alterações no texto não precisam disparar novas requisições.
🎯 useCallback x useMemo
A diferença é simples:
- ✅ useCallback armazena a própria função.
- ✅ useMemo armazena o resultado de uma função.
Os dois mecanismos estão relacionados à memoização, mas resolvem problemas diferentes.
⚙️ Quando usar?
O useCallback é especialmente útil quando uma função é passada para um componente otimizado com memo ou quando sua identidade é usada como dependência de outro Hook.
⚠️ Use com critério
Não é necessário envolver toda função em useCallback. A documentação oficial recomenda tratá-lo como uma otimização de performance. Se a aplicação não apresenta um problema real de renderização ou processamento, adicionar memoização pode apenas deixar o código mais complexo.