React Academy · Aula

Memorizando valores de contexto com useMemo

Envolva os objetos de valor do contexto em useMemo para evitar novas renderizações desnecessárias dos consumidores.

Memorizando valores de contexto com useMemo é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 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 React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você aprenderá por que os objetos de valor do contexto precisam ser memorizados com useMemo e como configurar corretamente as dependências para evitar novas renderizações desnecessárias.

O problema da referência do objeto

Sempre que um componente Provider é renderizado novamente, um novo literal de objeto `{ ... }` é criado como valor do contexto — mesmo que o conteúdo seja igual. Todos os consumidores são renderizados novamente porque a referência mudou.

// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

Corrigindo com useMemo

Envolva o valor do contexto em useMemo para que a mesma referência de objeto seja retornada entre as renderizações quando nada na matriz de dependências tiver mudado.

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

<UserCtx.Provider value={value}>
  {children}
</UserCtx.Provider>

Escolhendo as dependências com cuidado

Inclua na matriz de dependências todos os valores usados dentro de useMemo. A ausência de dependências causa valores desatualizados. Inclua propriedades primitivas (textos e números) e referências estáveis (funções envolvidas em useCallback).

Funções estáveis com useCallback

Os valores de funções mudam de referência a cada renderização. Envolva-os em useCallback antes de incluí-los em um valor de contexto com useMemo para evitar novas renderizações desnecessárias.

const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

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

Quando a memorização é desnecessária

Se o componente Provider nunca for renderizado novamente (por exemplo, se estiver no topo da árvore e o componente pai nunca mudar), useMemo adicionará sobrecarga sem benefício. Memorize apenas quando o próprio Provider for renderizado novamente.

Valores primitivos já são estáveis

Se o valor do seu contexto for primitivo (texto, número ou booleano), você NÃO precisará de useMemo — os valores primitivos são comparados por valor, não por referência. `value={isDark}` não causará novas renderizações extras.

// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

Analisando o efeito da memorização

Use o criador de perfis do React DevTools para verificar se envolver o valor do contexto em useMemo realmente reduz as novas renderizações. Grave uma sessão antes e depois para ver a diferença na quantidade de confirmações.

Contextos memorizados aninhados

Quando vários contextos estiverem aninhados, memorize cada um de forma independente. Alterações em um contexto não afetarão o valor memorizado de outro.

O padrão do componente Provider

Encapsule o contexto, o estado e a memorização dentro de um componente Provider dedicado. Exporte um gancho personalizado para consumir o contexto. Esse é o padrão canônico para contextos reutilizáveis.

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const logout = useCallback(() => setUser(null), []);
  const value = useMemo(() => ({ user, logout }), [user, logout]);
  return <UserCtx.Provider value={value}>{children}</UserCtx.Provider>;
}

export const useUser = () => useContext(UserCtx);

Verificação rápida

Qual é o principal motivo para envolver um objeto de valor do contexto em useMemo?

Recapitulação

Envolva os objetos de valor do contexto em useMemo com as dependências corretas. Estabilize os valores de funções com useCallback. Valores primitivos não precisam de memorização. Encapsule a configuração do contexto em um componente Provider com um gancho personalizado.

A seguir

Próxima lição: **Padrão de seletor de contexto** — você implementará um gancho seletor que renderiza novamente os consumidores apenas quando uma parte específica do contexto mudar.

Perguntas Frequentes

A aula “Memorizando valores de contexto com useMemo” é grátis?

Sim — o texto completo de “Memorizando valores de contexto com useMemo” é 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 React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Memorizando valores de contexto com useMemo”?

Envolva os objetos de valor do contexto em useMemo para evitar novas renderizações desnecessárias dos consumidores. Você pratica React 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 React Academy?

Nenhuma experiência prévia é necessária. React 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 2 de 4.

Quanto tempo leva a aula “Memorizando valores de contexto com useMemo”?

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 React Academy?

Sim. Cada aula de React 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

Dividindo contextos para limitar novas renderizações
Memorizando valores de contexto com useMemo
Padrão de seletor de contexto
Quando não usar Context

← Voltar para React Academy