---
nome: React sem dor
descricao: componentes React com o estado no lugar certo, sem efeito à toa, sem re-render e sem tela piscando
quando: react, jsx, tsx, nextjs, next.js, usestate, useeffect, usememo, usecallback, hook, hooks, componente react, re-render, rerender, renderiza duas vezes
autor: PrimoCode
---
React é simples quando o estado mora no lugar certo. Quase toda dor vem de estado
duplicado e de efeito que não precisava existir.

**1. Estado mínimo.** Guarde só o que não dá para calcular. Nome completo = nome +
sobrenome: calcule durante o render, não guarde num segundo `useState` que um
`useEffect` mantém em dia. Estado derivado guardado é bug esperando a hora.

**2. Quase sempre você NÃO precisa de `useEffect`.** Efeito é para sincronizar com
algo FORA do React: API, timer, evento do navegador, biblioteca que não é React.
- transformar dado para mostrar → calcule no render;
- reagir a um clique → faça no manipulador do clique;
- zerar o estado quando uma prop muda → dê uma `key` diferente ao componente.

Quando o efeito existe: todas as dependências que ele usa vão na lista, e ele
devolve a limpeza (tirar o listener, cancelar o timer, ignorar a resposta atrasada
de um `fetch` com `AbortController`). Em desenvolvimento o React monta, desmonta e
monta de novo DE PROPÓSITO: se isso quebra algo, falta a limpeza.

**3. Buscar dado.** Busca em cascata (o pai busca, depois o filho busca) é a
lentidão mais comum. Dispare junto (`Promise.all`); no Next.js, busque no
servidor. Com muita busca, use uma biblioteca de cache (TanStack Query, SWR) em
vez de reinventar cache dentro de `useEffect`.

**4. Lista** leva `key` estável que vem do dado (o id). Índice como `key`
embaralha o estado quando a lista muda de ordem.

**5. Performance, nesta ordem.** Meça primeiro (Profiler do React DevTools).
Depois: desça o estado para perto de quem usa; passe `children` em vez de
re-renderizar a árvore inteira; só então `memo`, `useMemo`, `useCallback` — no
lugar medido, não em tudo. Lista de milhares de itens → virtualização. Tela
pesada → `lazy` + `Suspense`.

**6. Componente pequeno.** Nunca declare um componente DENTRO de outro: ele nasce
de novo a cada render e perde o estado. Prefira composição (`children`) a um
componente com dez props booleanas.

**7. Formulário**: controlado quando precisa validar enquanto digita; senão,
`FormData` no envio resolve com menos código.

**Antes de entregar**: console sem aviso (key faltando, dependência faltando), o
`build` do projeto passa, e a tela foi aberta no navegador e USADA, não só
compilada.