English 中文 العربية 日本語 Português

useCallback Callback em Cache

Última atualização: 2026-11-03

useCallback Callback em Cache

useCallback cacheia uma referência de função: enquanto as dependências se mantêm iguais, ele retorna a mesma função. Quando você entrega esse callback a um componente filho memoizado, ele evita que o pai renderize o filho à toa, porque uma referência de função recém-criada sempre quebra a comparação rasa dentro de memo. Fora de tal consumidor, o cache não traz nenhum ganho, então vale a pena recorrer a ele apenas quando uma referência estável é o que realmente importa.

GrupoEfeitos e Desempenho
TipoHook
DesdeReact 16.8

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

const handleClick = useCallback((id) => {
  removeItem(id)
}, [removeItem])   // list the dependencies you use

// equivalent to useMemo(() => handleClick, deps)

⚙️ Parâmetros

fnA função a ser cacheada (um manipulador de eventos, um callback passado a um componente filho etc.).
depsO array de dependências: qualquer mudança retorna uma nova função, caso contrário a referência anterior é retornada.

Retorna：Retorna a referência de função em cache: enquanto as dependências não mudam, cada renderização recebe a mesma função.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Enquanto você digita na entrada, o console não imprime mais "Rendered: Count +1" — a referência de onClick está estável, então o filho memoizado pula a re-renderização; clicar no botão ainda incrementa a contagem.
▶ Experimente

💡 Pontos-chave

💡 Dica useCallback(fn, deps) é apenas açúcar para useMemo(() => fn, deps), então ambos cacheiam uma referência.
⚠️ Aviso Sem um componente filho memoizado ou um consumidor que dependa do array, useCallback é pura sobrecarga.
ℹ️ Informação Uma dependência esquecida faz o callback fechar sobre dados obsoletos — as mesmas regras de dependência de useEffect; prefira atualizações de estado funcionais para encolher a lista.
usememo react-memo memo-when-not props-callbacks
Mais casos em breve.

📚 Tutoriais Relacionados

useMemo e useCallback
Lição 11: cacheando callbacks e trabalhando com componentes filhos memoizados.

❓ Perguntas Frequentes

P Quando realmente preciso de useCallback?
R Quando o callback é passado a um filho envolvido em memo, ou usado como dependência de useEffect ou useMemo — uma referência estável só faz sentido ali.
P E se useCallback(fn, []) ler um state obsoleto?
R Mude para uma atualização funcional como setCount(c => c + 1) que não depende de valor externo; quando você realmente precisar do valor antigo, liste-o como dependência.
P Como ele se relaciona com useMemo?
R useCallback é o caso especial com formato de função de useMemo: um cacheia um valor, o outro cacheia uma referência de função, e o mecanismo por baixo é o mesmo.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%