React Academy · Aula

Padrão de seletor de contexto

Implemente um hook seletor simples que só gere uma nova renderização quando uma parte do contexto mudar.

Padrão de seletor de contexto é uma aula grátis de React 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 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ê implementará um gancho seletor de contexto que inscreve um componente apenas em uma parte do estado do contexto, evitando novas renderizações quando partes não relacionadas do contexto mudarem.

O problema dos seletores

useContext provoca uma nova renderização quando QUALQUER parte do contexto muda. Se um componente precisar apenas do nome do usuário, mas o contexto também contiver uma lista de notificações, adicionar uma notificação renderizará novamente o componente do nome sem necessidade.

O que é um seletor?

Um seletor é uma função que extrai uma parte específica do estado de um objeto de estado maior: `state => state.user.name`. Um gancho seletor se inscreve no contexto, mas só provoca uma nova renderização quando o valor selecionado muda.

Gancho seletor simples

Crie um gancho useSelector que leia o contexto e o envolva em useMemo, usando o resultado do seletor como chave. O componente só será renderizado novamente quando o valor selecionado mudar.

function useAppSelector(selector) {
  const state = useContext(AppCtx);
  return useMemo(() => selector(state), [state, selector]);
}

// Consumer only re-renders when user.name changes
const name = useAppSelector(s => s.user.name);

Verificação de igualdade superficial

useMemo com um seletor ainda provoca uma nova renderização se o seletor retornar uma nova referência de objeto ou matriz a cada chamada, como em `s => s.items.filter(...)`. Use uma comparação de igualdade superficial para ignorar novas renderizações quando o conteúdo for igual.

import { useRef } from 'react';

function useSelector(selector) {
  const state = useContext(AppCtx);
  const selected = selector(state);
  const ref = useRef(selected);
  if (!shallowEqual(ref.current, selected)) {
    ref.current = selected;
  }
  return ref.current;
}

Biblioteca use-context-selector

Para uso em produção, a biblioteca **use-context-selector** fornece um gancho useContextSelector com inscrição e verificações de igualdade eficientes — sem a necessidade de gerenciadores de estado externos.

import { useContextSelector } from 'use-context-selector';

const name = useContextSelector(AppCtx, s => s.user.name);

Zustand como solução nativa de seletores

O gancho `useStore(selector)` do Zustand tem suporte integrado a seletores com igualdade superficial pronta para uso, sendo uma opção natural para árvores de estado grandes nas quais inscrições detalhadas são importantes.

const name = useAppStore(state => state.user.name);

Quando os seletores são excessivos

Se as atualizações do contexto forem infrequentes e os consumidores forem baratos de renderizar novamente, os seletores acrescentarão complexidade sem benefício mensurável. Analise primeiro — sempre otimize com base em evidências.

Memorizando funções seletoras

Se você criar o seletor diretamente no corpo do componente, ele receberá uma nova referência de função a cada renderização, podendo interromper a memorização. Defina os seletores fora do componente ou use useCallback.

// Outside component — stable reference
const selectName = s => s.user.name;

function Profile() {
  const name = useAppSelector(selectName);
  return <p>{name}</p>;
}

Seletores derivados

Componha seletores chamando um dentro de outro. Os seletores derivados calculam valores a partir de seletores básicos, mantendo a lógica de negócio fora dos componentes.

const selectFullName = s => s.user.firstName + ' ' + s.user.lastName;

Verificação rápida

Por que as funções seletoras devem ser definidas fora do corpo do componente quando usadas com useContextSelector ou useMemo?

Recapitulação

Os seletores extraem uma parte do estado do contexto e evitam novas renderizações quando partes não relacionadas mudam. Defina os seletores fora dos componentes para manter referências estáveis. Use use-context-selector ou Zustand para obter suporte a seletores adequado para produção.

A seguir

Próxima lição: **Quando não usar Context** — você aprenderá a reconhecer quando passar propriedades, usar composição ou adotar um gerenciador de estado é uma opção melhor do que Context.

Perguntas Frequentes

A aula “Padrão de seletor de contexto” é grátis?

Sim — o texto completo de “Padrão de seletor de contexto” é 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 “Padrão de seletor de contexto”?

Implemente um hook seletor simples que só gere uma nova renderização quando uma parte do contexto mudar. 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 3 de 4.

Quanto tempo leva a aula “Padrão de seletor de contexto”?

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