0Pricing
Frontend Academy · Aula

useMemo e useCallback para desempenho

Memorize cálculos dispendiosos com useMemo e referências estáveis de funções com useCallback para evitar novas renderizações desnecessárias dos componentes filhos.

useMemo e useCallback para desempenho é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Comportamento padrão do React

Por padrão, React renderiza novamente um componente sempre que seu estado ou seu pai é renderizado novamente. Os componentes filhos também são renderizados novamente mesmo que suas propriedades não tenham mudado. Para a maioria dos componentes, isso é normal — React é rápido.

useMemo — memorize valores dispendiosos

useMemo(fn, deps) armazena em cache o resultado de uma computação. A função só é executada quando as dependências mudam. Use-o para cálculos dispendiosos que seria inútil repetir a cada renderização.

const expensiveResult = useMemo(() => {
  return items.filter(item => item.category === category).sort((a, b) => a.price - b.price);
}, [items, category]);
// Only recalculates when items or category changes

useCallback — memorize funções

useCallback(fn, deps) retorna uma função memorizada que mantém a mesma referência, a menos que as dependências mudem. Use-o ao passar funções de retorno para componentes profundamente aninhados ou memorizados.

const handleDelete = useCallback((id: string) => {
  setItems(prev => prev.filter(item => item.id !== id));
}, []); // stable reference — empty deps because only setItems is used

<ItemList items={items} onDelete={handleDelete} />

React.memo — evite novas renderizações

React.memo(Component) envolve um componente para que ele só seja renderizado novamente quando suas propriedades mudarem (comparação superficial). Combine-o com useCallback para obter propriedades de função de retorno estáveis.

const MemoItem = React.memo(function Item({ text, onDelete }: ItemProps) {
  console.log('Item rendered:', text); // only logs when props change
  return <li>{text} <button onClick={onDelete}>×</button></li>;
});

// onDelete must be stable (from useCallback) for memo to help

Quando NOT otimizar

A otimização prematura é uma armadilha. useMemo e useCallback têm um custo: o fechamento e a comparação das dependências. Para operações baratas (filtrar 10 itens), o custo adicional supera o benefício. Otimize quando medir um problema real de desempenho.

Analise antes de otimizar

Use o analisador de desempenho do React DevTools para medir os tempos reais de renderização antes de adicionar memorização. O analisador mostra quais componentes demoram mais e quantas vezes são renderizados. Corrija com base em evidências, não em suposições.

useMemo para referências estáveis

useMemo também é útil para manter uma referência estável — não pelo desempenho do cálculo em si, mas para impedir que um memo ou efeito subsequente seja executado novamente sem necessidade.

// Without useMemo, this creates a new array every render:
const config = useMemo(() => ({ endpoint: '/api', timeout: 5000 }), []);

// Without memoization, useEffect would re-run on every render:
useEffect(() => { initSDK(config); }, [config]);

Dependências de useCallback

useCallback segue as mesmas regras de dependências que useEffect. Inclua todas as variáveis do escopo externo usadas pela função de retorno. Os definidores de estado (de useState) são sempre estáveis e não precisam estar nas dependências.

A relação entre useMemo e useCallback

useCallback(fn, deps) equivale a useMemo(() => fn, deps). Eles usam o mesmo mecanismo — useCallback é apenas uma forma abreviada de memorizar funções especificamente.

Memorização de itens de lista

Um padrão comum: memorize os componentes de itens de lista quando a lista for grande e for renderizada novamente com frequência. Passe funções de retorno estáveis de useCallback para não anular o efeito da memorização.

const MemoRow = React.memo(Row);
const handleEdit = useCallback((id) => edit(id), []);
const handleDel  = useCallback((id) => remove(id), []);

{rows.map(row => (
  <MemoRow key={row.id} row={row} onEdit={handleEdit} onDelete={handleDel} />
))}

Memorização do valor do contexto

Memorize o valor passado a um provedor de contexto para impedir que todos os consumidores sejam renderizados novamente sempre que o pai do provedor for renderizado novamente.

const value = useMemo(() => ({ user, login, logout }), [user]);

Verificação rápida

Qual é a finalidade de useCallback?

Recapitulação: useMemo e useCallback

useMemo armazena em cache valores computados dispendiosos. useCallback armazena referências de função. React.memo evita novas renderizações quando as propriedades não mudam na comparação superficial. Combine os três para obter desempenho no nível do componente. Analise primeiro — a memorização prematura adiciona complexidade sem benefício. Referências estáveis impedem que efeitos e memos subsequentes sejam executados novamente.

Perguntas Frequentes

A aula “useMemo e useCallback para desempenho” é grátis?

Sim — o texto completo de “useMemo e useCallback para desempenho” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “useMemo e useCallback para desempenho”?

Memorize cálculos dispendiosos com useMemo e referências estáveis de funções com useCallback para evitar novas renderizações desnecessárias dos componentes filhos. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “useMemo e useCallback para desempenho”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. useContext para estado global
  2. useReducer para estado complexo
  3. useMemo e useCallback para desempenho
  4. Hooks personalizados: extraindo lógica reutilizável
← Voltar para Frontend Academy