Hooks Avançados do React
Explore useCallback, useMemo, useRef e outros hooks avançados com exemplos práticos.
useCallback
O useCallback memoriza uma função, evitando que ela seja recriada a cada render. Útil para otimizar componentes filhos que dependem de referência de função.
useCallback vs Função Normal
Compare o comportamento com e sem useCallback
Count: 0
Other: 0
Abra o console para ver quando as funções são chamadas
useMemo
O useMemo memoriza o resultado de um cálculo custoso, recalculando apenas quando suas dependências mudam.
useMemo para Cálculos Custosos
Otimize cálculos pesados com useMemo
Resultado sem memo: 15
Resultado com memo: 15
Veja no console quando cada cálculo é executado
useRef
O useRef cria uma referência mutável que persiste durante todo o ciclo de vida do componente. Útil para acessar elementos DOM e armazenar valores que não causam re-render.
useRef para DOM e Valores Persistentes
Diferentes usos do useRef
Renders: 1
Count atual: 0
Count anterior: 0
- useCallback: Para memorizar funções e evitar re-renders desnecessários
- useMemo: Para memorizar resultados de cálculos custosos
- useRef: Para referências DOM e valores que não causam re-render