React Academy · Aula

Dividindo contextos para limitar novas renderizações

Separe valores que mudam com frequência daqueles estáveis em contextos diferentes.

Dividindo contextos para limitar novas renderizações é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 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á a dividir os Contextos do React em provedores separados para minimizar novas renderizações quando apenas parte do valor do contexto mudar.

O problema das novas renderizações com Context

Todo componente que chama useContext(MyCtx) é renderizado novamente quando QUALQUER parte do valor do contexto muda — mesmo que a parte usada por ele não tenha mudado. Um único contexto grande pode causar muitas novas renderizações desnecessárias.

Dividindo pela frequência de atualização

Separe os valores que mudam com frequência daqueles que raramente mudam. Coloque cada grupo em seu próprio contexto. Os consumidores se inscrevem apenas no contexto de que precisam.

const ThemeCtx = createContext('light');
const UserCtx = createContext(null);
// theme changes rarely; user changes on login/logout — same frequency is fine
// but notifCount changes every second — split it out!

Separando os contextos de dados e de despacho

Um padrão comum é dividir um contexto para os dados de estado (que provoca novas renderizações a cada alteração) e outro para as funções de despacho e definição de estado (estáveis, sem nunca provocar novas renderizações nos consumidores). Os consumidores que usam apenas o despacho nunca são renderizados novamente quando os dados mudam.

const CountCtx = createContext(0);
const SetCountCtx = createContext(() => {});

function Provider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountCtx.Provider value={count}>
      <SetCountCtx.Provider value={setCount}>
        {children}
      </SetCountCtx.Provider>
    </CountCtx.Provider>
  );
}

Memorizando o contexto de despacho

As funções de definição de estado de useState são estáveis (a mesma referência em toda renderização), portanto o valor do contexto de despacho não muda. Porém, se você calcular um objeto de ações, envolva-o em useMemo.

const actions = useMemo(() => ({
  increment: () => setCount(c => c + 1),
  reset: () => setCount(0),
}), []); // stable — empty deps

Provedores aninhados

Aninhe vários provedores na árvore de componentes. Os consumidores importam e usam apenas o contexto específico de que precisam, mantendo as inscrições restritas.

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <NotificationsProvider>
          <Router />
        </NotificationsProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

Analisando o desempenho antes de dividir

Sempre analise o desempenho com React DevTools antes de dividir os contextos. Novas renderizações desnecessárias só são um problema quando são dispendiosas. Não complique excessivamente contextos cuja renderização novamente seja rápida.

Compromissos da divisão de contextos

Mais contextos significam mais provedores na árvore de componentes. Isso aumenta a carga cognitiva. Divida apenas quando a análise de desempenho mostrar um problema, não de forma preventiva.

Combinando com React.memo

Mesmo com um único contexto, envolver componentes filhos dispendiosos em React.memo faz com que eles só sejam renderizados novamente quando suas propriedades mudarem — não quando o contexto mudar. Essa pode ser uma alternativa mais simples à divisão.

const ExpensiveChild = React.memo(function({ label }) {
  return <div>{label}</div>;
}); // won't re-render on context change if label hasn't changed

useReducer + Context

Combine useReducer com o contexto para gerenciar estados complexos. Armazene o estado em um contexto e a função de despacho em outro. O despacho é estável; o estado é atualizado a cada ação.

Verificação rápida

Por que dividir o estado e o despacho em contextos separados melhora o desempenho?

Recapitulação

Divida os contextos pela frequência de atualização: o estado que muda frequentemente em um contexto e o despacho e as funções de definição de estado estáveis em outro. Analise primeiro, divida apenas quando isso for relevante e considere React.memo como uma alternativa mais simples.

A seguir

Próxima lição: **Memorizando valores de contexto com useMemo** — você envolverá os objetos de valor do contexto em useMemo para que os consumidores não sejam renderizados novamente quando os dados não mudarem.

Perguntas Frequentes

A aula “Dividindo contextos para limitar novas renderizações” é grátis?

Sim — o texto completo de “Dividindo contextos para limitar novas renderizações” é 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 “Dividindo contextos para limitar novas renderizações”?

Separe valores que mudam com frequência daqueles estáveis em contextos diferentes. 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 1 de 4.

Quanto tempo leva a aula “Dividindo contextos para limitar novas renderizações”?

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