React: os cinco padrões de componente e o lugar de cada estado

O React de 2026, em quatro fatos

O curso que origina este guia abre com um diagnóstico que segue válido: "o agente escreve muito bem o React, o Tailwind e o CSS de dois anos atrás. Ele acerta a estrutura, erra a atualidade, e nada no processo avisa." O antídoto é datar o terreno. Quatro fatos definem o React de agosto de 2026, todos da fonte oficial:

• A versão estável é a 19.2, anunciada em 1º de outubro de 2025, com o patch 19.2.7 de junho de 2026 (página de versões do react.dev). O release trouxe <Activity>, useEffectEvent e o agrupamento das revelações de Suspense no SSR. Versão 19.3 ou React 20 ainda inexistem; desconfie de código ou artigo que os cite.
• O React Compiler chegou ao 1.0 estável em 7 de outubro de 2025: memoização automática em tempo de build, sem reescrita de código (blog oficial do React).
• O Next.js estável é o 16, de 21 de outubro de 2025, com a série corrente 16.3 de 3 de agosto de 2026 (blog oficial do Next.js).
• O React mudou de dono: em 24 de fevereiro de 2026, React, React Native e o JSX passaram da Meta para a React Foundation, fundação independente hospedada pela Linux Foundation (blog oficial do React). Nada muda no código; muda quem governa o projeto.

Versões conferidas no registro npm e nas fontes oficiais em 18 de agosto de 2026. Número de versão envelhece rápido: ao cobrar atualização, reconfira na fonte antes de citar.

Os cinco padrões de componente e o sinal de reprovação de cada um

O curso reduz a maioria das telas a cinco padrões, e o princípio que os organiza segue na documentação oficial: cada peça de estado tem um componente dono; a doc chama isso de "single source of truth" e manda subir o estado compartilhado ao pai comum em vez de duplicá-lo. Revisar vira reconhecer o padrão e procurar o sinal que o reprova:

Quando o widget escapa dos cinco padrões

Combobox com filtro, seletor de data e tabela navegável pelo teclado costumam ficar de fora do que um catálogo pronto de componentes entrega, e é nesse degrau que o agente improvisa uma div com onClick. O React Aria Components, mantido pela Adobe, cabe aí como dependência direta do projeto, sem intermediário: ele já traz o padrão ARIA completo do widget (papel, gerenciamento de foco, navegação por teclado, anúncio para leitor de tela) em lugar de deixar cada um desses itens para reimplementação manual. Quem chega à biblioteca por baixo de um catálogo de componentes usa esse comportamento sem enxergá-lo; instalá-la direto é o caminho para a peça que o catálogo deixou fora da lista.

A cadência de publicação ajuda a datar a entrega: a biblioteca manteve release mensal ao longo de 2026, com seleção múltipla no ComboBox na 1.16, linhas expansíveis de Table na 1.17 e o PreviewTrigger na 1.20. A pergunta que a revisão faz é curta: este widget customizado herda comportamento de uma biblioteca de acessibilidade, ou alguém escreveu o controle de foco e as teclas de seta na mão, linha a linha.

React Compiler: a memoização saiu das suas mãos

O React Compiler 1.0, estável desde 7 de outubro de 2025, é uma ferramenta de build que otimiza a aplicação por memoização automática, sem exigir reescrita. A documentação delimita o foco: melhorar a performance de atualização, pulando re-renders em cascata e cálculos caros. Ele acelera re-render; o primeiro carregamento e a rede ficam fora do escopo dele.

A recomendação oficial muda o que a revisão cobra: para código novo, confiar na memoização do compilador e reservar useMemo e useCallback para quando for preciso controle preciso; em código existente, manter a memoização já escrita ou testar com cuidado antes de remover. A doc em momento algum proíbe os dois hooks: eles viram válvula de escape. Na prática de encomenda: um componente novo coberto de useMemo em tudo que é linha é sinal de agente escrevendo o React de dois anos atrás; pergunte se o projeto já ativou o compilador antes de aceitar. Projetos novos de Expo (SDK 54 em diante) já nascem com ele ligado, e create-next-app e create-vite oferecem templates com o compilador; projeto existente precisa adotá-lo de propósito.

Onde mora cada estado: a pergunta de trinta segundos

Antes de criar qualquer estado, responda uma coisa: onde mora a verdade deste dado. O curso trata a confusão entre os tipos como a causa raiz da maioria dos bugs de estado (o sintoma clássico é uma tela mostrando um saldo e a outra mostrando outro), e errar a classificação transforma a correção: ela deixa de ser ajuste de tela e vira reescrita da camada de dados. Os cinco lugares:

• Local: pertence a um componente só (aba ativa, campo aberto); mora em useState ou useReducer.
• Derivado: calculável de outros valores (total, lista filtrada); calcule na renderização em vez de guardar: guardar cria duas fontes de verdade que divergem na primeira alteração.
• Compartilhado de cliente: atravessa telas sem vir do servidor (tema, sessão, carrinho); Context para baixa frequência, Zustand ou Jotai para alta frequência e estado granular.
• De servidor: pertence ao backend (lista de pedidos); mora em camada de cache: TanStack Query ou Server Component.
• O quinto lugar, esquecido: o endereço da tela: filtro, aba, ordenação e página moram na URL, via nuqs.

Quadro do curso Frontends com Vibecoding, atualizado com as recomendações das documentações oficiais em agosto de 2026.

Os números de adoção confirmam a tabela. O State of React 2025 mediu uso e retenção de cada biblioteca:

O comentário editorial da própria pesquisa resume: o Zustand "está ganhando terreno rápido" e, por liderar também em satisfação, "deve ser considerado o líder da categoria". Na semana de 9 a 15 de agosto de 2026, a API de downloads do npm registrou os downloads semanais:

• TanStack Query: 55,8 milhões.
• react-hook-form: 50,4 milhões.
• Zustand: 44,4 milhões.

A régua do curso descreve o ecossistema que o mercado de fato usa.

Estado compartilhado: o custo de re-render de cada ferramenta

A diferença entre as três ferramentas é quem redesenha quando o valor muda. Com Context e useReducer, todo consumidor re-renderiza quando o value do Provider muda, mesmo lendo uma fatia que permaneceu igual: bom para valor estável e raro, caro em alta frequência. Com Zustand, cada componente assina só a fatia que usa via seletor, sem Provider e sem cascata; a documentação da v5 avisa que seletor devolvendo referência nova a cada chamada pode causar loop infinito (o erro estampa "Maximum update depth exceeded") e prescreve o useShallow para devolver referência estável. Com Jotai, átomos primitivos se compõem e a doc garante o grão fino: átomos observados re-renderizam apenas as partes pequenas da aplicação que precisavam da atualização: o caso do formulário complexo e do editor.

Para atualização que disputa com a digitação, as primitivas de concorrência: useTransition marca a atualização como baixa prioridade e expõe o sinal de pendência; useDeferredValue deixa o valor digitado chegar na hora e adia a versão derivada; e useSyncExternalStore é o hook oficial para conectar o React a uma fonte externa; você raramente o escreve direto, e saber que ele existe explica por que o Zustand funciona com segurança no render concorrente.

Um caso à parte vem do capítulo de tabelas do curso: dado que muda várias vezes por segundo fica fora do ciclo de renderização: os dados quentes vivem no motor e a tela repinta apenas o que mudou. O teste que expõe o defeito leva um minuto: abra o painel de componentes do React e observe se o componente pai redesenha a cada atualização. Se redesenhar, o dado está no lugar errado.

Existe uma linha a mais nessa decisão, e ela atende justamente a alta frequência: os sinais reativos. O @preact/signals-react propaga a mudança com granularidade fina, atualizando o ponto da tela que lê o sinal sem levar a árvore acima dele junto no re-render, o que serve a cotação em tempo real, cronômetro e cursor de edição colaborativa. A ressalva entra colada: a convivência com o React Compiler precisa ser verificada dentro do projeto antes de adotar os dois ao mesmo tempo, porque ambos mexem no mesmo lugar, a decisão de quando o componente repinta. Adotar a dupla sem essa verificação é assumir um risco que ninguém mediu.

Quando o useEffect sobra: o critério oficial

A página "You Might Not Need an Effect" da documentação define Effects como válvula de escape do paradigma: eles existem para sincronizar o componente com um sistema externo: um widget de fora do React, a rede, o DOM do navegador. E entrega a regra na primeira dobra: sem sistema externo envolvido, você deveria dispensar o Effect. Dois abusos ganham nome próprio na doc:

O 19.2 completou o quadro com o useEffectEvent: ele separa a parte "de evento" da lógica de um Effect, para que valores lidos ali dentro deixem de re-disparar o Effect inteiro; Effect Events ficam fora do array de dependências, por regra da doc. Na mesma leva, o <Activity> esconde e restaura a interface e o estado interno dos filhos: ao esconder, o React guarda o estado, destrói os Effects e oculta com display: none; ao voltar, restaura o estado e recria os Effects. Quem revisa precisa saber que painel escondido por Activity mantém o formulário preenchido ao alternar, comportamento desejado e surpreendente para quem esperava desmontagem.

Dado de servidor: cache com dono

Buscar dado de servidor juntando estado de componente com efeitos colaterais reimplementa, à mão e mal, uma camada de cache: sem revalidação, sem deduplicação e sem estado de obsolescência. A comparação é nossa; a motivação oficial do TanStack Query descreve o mesmo cenário: sem uma solução holística, os desenvolvedores acabam "cobbling together component-based state and side-effects" para prover dado assíncrono, e as bibliotecas tradicionais de estado de cliente "are not so great at working with async or server state". A biblioteca entrega "fetching, caching, synchronizing and updating server state" com useQuery para leitura (data, isPending, isError, refetch), useMutation para escrita e invalidação por chave. A linha estável segue a v5 (5.101.4, de 21 de julho de 2026), e uma v6 inexiste no npm: entrega que cite "TanStack Query 6" está citando algo que ainda foi publicado em lugar nenhum.

Para os estados assíncronos de envio, o React 19 trouxe três hooks, cada um com a letra miúda que derruba código de agente.

Resposta de modelo que chega token a token

O useOptimistic cobre o valor que a interface consegue adiantar. Resposta de modelo de linguagem pede o movimento complementar da mesma família: o valor final leva segundos para existir e chega em pedaços, então a tela renderiza de forma incremental. O servidor abre um fluxo, por Server-Sent Events ou pelo corpo de um fetch lido em stream, e a interface pinta o texto parcial conforme ele chega, em vez de segurar um indicador de carregamento até a última palavra.

A API use() lê uma Promise direto no componente e, ao contrário dos hooks, pode aparecer em condicionais e loops. O tratamento de erro é estrutural: Promise pendente aciona o fallback do <Suspense>; Promise rejeitada aciona o Error Boundary mais próximo; a doc avisa que use dentro de try-catch simplesmente falha. E o Error Boundary continua sendo a única razão sancionada para escrever classe em 2026: "There is currently no way to write an Error Boundary as a function component", diz a referência oficial, que aponta o pacote react-error-boundary para quem prefere dispensar a classe própria.

Formulários: teclar sem redesenhar o formulário inteiro

O FAQ oficial do react-hook-form explica o mecanismo: a biblioteca se apoia em formulário não controlado (o register captura uma ref, em vez de value e onChange), e essa abordagem reduz os re-renders causados pela digitação. A régua de adoção do curso segue de pé: num campo único de busca, um useState resolve com menos código; a biblioteca se justifica a partir de três campos, ou quando o formulário engasgar no celular. A versão estável é a 7.85.0, de 8 de agosto de 2026; a v8 existe só em beta; entrega baseada nela é aposta, e aposta se declara.

const { register, handleSubmit, formState: { errors, isSubmitting } } =
  useForm<Cadastro>({ resolver: zodResolver(cadastroSchema), mode: "onTouched" });

A API que a revisão reconhece de relance: register liga o <input> ao formulário; handleSubmit valida antes de chamar o envio; formState expõe errors, isSubmitting e isValid. Campo que precise ser controlado entra via Controller, que isola o re-render ao próprio campo.

Filtro, aba e busca moram na URL

O quinto lugar de estado é o endereço da tela, e a ferramenta é o nuqs (2.9.6, de 17 de agosto de 2026; o pacote publica quase toda semana). A doc o apresenta como substituto direto: quem gerencia estado de interface com React.useState pode trocar por useQueryState para sincronizá-lo com a URL. Parâmetro de busca nasce string; para número, parseAsInteger converte "with parseInt (base 10)", e o valor default fica interno ao React: ele só vai para a URL se for setado explicitamente. Desde a versão 2 o uso exige envolver a aplicação no NuqsAdapter do framework (a doc lista adapters para Next.js, SPA com Vite, Remix, React Router v6, v7 e v8 e TanStack Router), e esquecê-lo na raiz é o erro de estreia: o valor nunca chega ao endereço.

O ganho de negócio que o curso destaca continua o argumento decisivo: o cliente manda o link do filtro para um colega, e o suporte reproduz a tela exata de uma reclamação. O guia de menus, abas e paginação retoma a mesma régua do lado da navegação. E para projeto fora do Next.js, os roteadores atuais são o React Router, na major 8 ("a user-obsessed, standards-focused, multi-strategy router", na definição do site oficial), e o TanStack Router, focado em type-safety: "the route tree is the application contract".

Next.js 16: a fronteira, o cache e a versão mínima

O Next.js 16, de 21 de outubro de 2025, mexeu no chão que o agente pisa em quatro pontos.

O 16.3, de 3 de agosto de 2026, somou até 90% menos memória no dev server e a suíte opt-in Instant Navigations, de cinco ferramentas, incluindo o helper de teste instant() para Playwright.

Sobre a fronteira, a doc oficial diz exatamente onde a diretiva vai: "use client" declara um ponto de entrada para renderização no cliente, no topo do arquivo, antes de qualquer import; ela dispensa repetição em todo arquivo de Client Component; entra só nos arquivos que servem de fronteira, e as props que a cruzam precisam ser serializáveis. O erro clássico que o curso descreve continua: escrever a diretiva em todo arquivo para calar o editor manda o componente inteiro para o navegador e joga fora o principal ganho do framework. Do outro lado, "use server" marca as Server Functions; para chamá-las do cliente, elas vivem em arquivo dedicado com a diretiva no topo.

Tela de dados: a escada e o v9 que mudou a conta

A escada do curso para lista longa segue válida: tabela nativa até alguns milhares de linhas; virtualização (TanStack Table para a lógica, TanStack Virtual 3.14.9 para desenhar só o visível) até a casa das cem mil; fatias pelo servidor quando a medição condenar o degrau de baixo; e desenhar como imagem só aceitando o preço de reconstruir a acessibilidade à mão. Sobe-se um degrau por vez, com medição.

O degrau dois mudou de conta em 4 de agosto de 2026, quando o TanStack Table v9 saiu estável.

Testes: comportamento, papel e navegador de verdade

A régua segue a da Testing Library, que a doc formula sem rodeio: o teste deve se parecer com o jeito que o usuário interage com a tela, e o getByRole, que consulta a árvore de acessibilidade, "should be your top preference for just about everything". A frase seguinte da doc é o bônus da revisão: se o papel deixa o elemento inalcançável, "it's possible your UI is inaccessible": o teste que falha em achar o botão pelo papel está denunciando a tela, além do código.

O ferramental de 2026 encorpou em três frentes.

A rede sob controle no teste de componente

Consultar pelo papel resolve metade do problema; a outra metade é o dado que o componente busca. Um componente montado sobre TanStack Query só se comporta como em produção quando a resposta da rede é controlável no teste, e trocar o fetch por uma função falsa amarra o teste ao detalhe de implementação que a própria régua da Testing Library manda evitar. O MSW (Mock Service Worker) intercepta a requisição na camada de service worker: o componente dispara a chamada de sempre, e o teste decide o que volta, com atraso, com erro ou com a lista inteira. Aí o ciclo fecha, porque o mesmo getByRole passa a afirmar os três estados que o usuário vê, carregando, falhou e chegou, sobre uma rede que o teste governa.

Como revisar o que o agente devolve: a checklist de 2026

• Date a entrega: React 19.2 e Next.js 16.2.11 ou mais novo (o release de segurança de julho de 2026 é o piso). Menção a React 19.3, React 20 ou TanStack Query v6 denuncia invenção.
• Identifique o padrão do componente e aplique o sinal de reprovação da tabela dos cinco padrões.
• Componente novo coberto de useMemo e useCallback: pergunte se o projeto ativou o React Compiler antes de aceitar memoização manual em tudo.
• Todo useEffect novo nomeia o sistema externo que o justifica; sem resposta, devolva com o critério da doc.
• Pergunte de cada estado onde mora a verdade daquele dado. Trinta segundos aqui evitam a reescrita da camada de dados.
• Dado de servidor mora em cache com dono (TanStack Query ou Server Component); cópia dele num store local é o bug de amanhã.
• "use client" só nos arquivos de fronteira; middleware.ts novo virou proxy.ts; Server Function autentica por cookies ou headers e devolve só o que a tela usa.
• Em lista, a key vem do identificador do dado; em seletor do Zustand que monta objeto, exija useShallow.
• Em tabela com TanStack Table v9, confira o tableFeatures() enxuto e recuse o useLegacyTable sem justificativa.
• Peça o teste com getByRole: ele prova o comportamento e denuncia tela inacessível no mesmo movimento.

O que este guia deixa de fora, e por quê

O guia cobre a revisão e a encomenda; ficam fora, por serem pré-requisito ou especialidade: a sintaxe do JSX em si; o mecanismo interno de reconciliação e o funcionamento do compilador por dentro; o bootstrap de um projeto novo; hooks customizados; a tipagem avançada de TypeScript com React; e a mecânica completa de Server Actions além das recomendações de segurança citadas. Quando o trabalho esbarrar num desses temas, a fonte é a documentação oficial de cada projeto: react.dev, nextjs.org e as docs de cada biblioteca da tabela de versões.

Perguntas frequentes