Referência React

Última atualização: 2026-11-03

Referência React

Lista alfabética de 80 entradas React: conceitos básicos, renderização e estado, padrões de componentes, efeitos e desempenho, roteamento e estado, dados e engenharia, ecossistema — com sintaxe, exemplo ao vivo e editor online.

A
AbortController	O AbortController é uma API nativa do navegador: passe seu signal para fetch e chame abort...
Action Design	Uma action é um objeto comum que descreve o que aconteceu: seu type é a identidade, geralm...
B
BrowserRouter	O BrowserRouter é o contêiner de roteamento do react-router-dom: ele observa o endereço e ...
C
Callback Props	As props podem carregar funções além de dados. O filho chama o callback que o pai passou n...
children	children é uma prop especial: tudo o que fica entre as tags de abertura e fechamento de um...
Cleanup Function	A função de limpeza é o desmonte retornado por um efeito: ela roda uma vez antes da próxim...
Component	Um componente é a menor unidade reutilizável de um aplicativo React: uma função que recebe...
Component Tree	Um aplicativo React é uma árvore de componentes aninhados: o componente raiz fica no topo ...
Composition	O React recomenda composição em vez de herança para reutilizar componentes: o pai passa JS...
Conditional Rendering	O React não tem tag if: renderização condicional significa escrever a lógica JavaScript co...
Controlled Components	Um componente controlado é aquele cujo valor é conduzido pelo estado do React: o valor é v...
createContext	createContext cria um objeto Context que permite aos dados viajar por níveis da árvore sem...
CSS Modules	Os CSS Modules transformam um arquivo CSS comum em estilos com escopo local: no momento da...
Custom Hooks	Um hook personalizado é uma função comum cujo nome começa com use, que pode chamar outros ...
D
Declarative UI	UI declarativa significa descrever apenas como a interface deve ficar em determinado estad...
Default Props	Quando o pai não passa uma prop, o valor dela é undefined e a interface pode ficar em bran...
Dependency Array	O array de dependências diz a um efeito para quem ele roda: um array vazio o faz rodar uma...
Dynamic Forms	Quando a quantidade de campos não é fixa, conduza a renderização a partir de um array mant...
E
Effect Pitfalls	As armadilhas do useEffect se concentram no array de dependências: uma dependência ausente...
Entry File	O arquivo de entrada — normalmente src/main.jsx — é onde um aplicativo React começa: ele m...
ErrorBoundary	Um ErrorBoundary é uma rede de segurança em nível de componente: ele captura erros na árvo...
Event Handling	O React liga eventos com props onXxx em camelCase, como onClick e onChange, e o valor de u...
Event Parameters	Um handler de evento recebe o objeto de evento e e pode ler dele valores como target.value...
Event Types	Os tipos de evento vêm de @types/react: onClick é tipado como MouseEvent<HTMLButtonElement...
F
Filter & Sort Lists	Filtrar e ordenar uma lista não altera o array original; em vez disso, você deriva um novo...
Form Inputs	Campos de texto, caixas de seleção, listas suspensas e áreas de texto seguem todos a mesma...
Form Validation	A essência da validação é derivar erros a partir do estado: uma função de validação calcul...
forwardRef	Componentes de função não recebem um ref por padrão. forwardRef encaminha o ref passado pe...
Framer Motion	O Framer Motion (publicado hoje como o pacote motion) é a biblioteca de animação mais popu...
Functional Updates	Passar uma função ao setState, como setCount(c => c + 1), significa calcular o próximo est...
G
Generic Components	Componentes genéricos deixam o tipo seguir os dados: uma função List<T> renderiza um array...
J
JSX	JSX é uma extensão de sintaxe do JavaScript que permite escrever a marcação da interface d...
JSX vs HTML	JSX parece HTML, mas algumas regras mudam: os atributos usam camelCase, class vira classNa...
K
key	Uma key é a identidade de um elemento dentro de uma lista renderizada. O React se apoia ne...
L
List Rendering	O React renderiza listas mapeando um array por meio de map() para um conjunto de elementos...
M
Multi-Step Forms	Um formulário em várias etapas equivale a um estado de etapa, renderização condicional da ...
N
NavLink	O NavLink é um Link ciente do estado ativo: quando o endereço atual corresponde ao seu pro...
Nested Lists	Quando os dados têm uma estrutura de vários níveis, como categorias que contêm entradas, v...
Nested Routes	Rotas aninhadas expressam um layout mais suas páginas filhas como elementos Route pais e f...
Next.js App Router	O App Router é o roteador por convenção de arquivos introduzido no Next.js 13+: cada pasta...
Next.js Data Fetching	Em um server component do Next.js você pode aguardar o fetch diretamente, e o next.revalid...
Next.js Deploy	A Vercel é a primeira escolha para implantar o Next.js — configuração zero, com suporte a ...
O
Object & Array State	O estado precisa ser substituído por um objeto ou array novo antes que o React perceba uma...
P
preventDefault	e.preventDefault() interrompe a ação padrão do navegador para um evento, mais principalmen...
Props	Props são os dados que um componente pai entrega a um filho, e elas se comportam como argu...
ProtectedRoute	Um guardião de rota verifica permissões antes que a página abra: envolva uma rota em Prote...
Provider Pattern	O padrão Provider empacota os dados e os métodos que os alteram em um componente Provider ...
R
React DevTools	O React DevTools é a extensão oficial de navegador que permite inspecionar a árvore de com...
React.lazy	React.lazy(() => import('./Page')) transforma um componente em um chunk baixado apenas qua...
React.memo	Envolver um componente em React.memo permite que ele pule uma re-renderização quando suas ...
Reducer Patterns	Alguns padrões idiomáticos mantêm os redutores organizados: inicialização preguiçosa pelo ...
Redux Toolkit	O Redux Toolkit (RTK) é a forma oficialmente recomendada de escrever Redux: createSlice ge...
Render Props	Render props significa passar o JSX que você quer renderizar para um componente como uma p...
Rendering Model	O React atualiza em duas etapas: primeiro roda a sua função de componente para produzir o ...
Rules of Hooks	Os Hooks obedecem a duas regras de ferro: chame-os apenas no nível mais alto de um compone...
S
styled-components	O styled-components é a principal biblioteca de CSS-in-JS: você escreve CSS dentro do Java...
T
Tailwind in React	O Tailwind CSS é um framework de CSS atômico: ele divide os estilos em classes de utilidad...
Three-State Fetching	Toda requisição de dados tem três estados: loading enquanto está em andamento, success qua...
Typed Props	No TypeScript você usa interface ou type para construir um contrato para as props: nomes e...
U
UI Libraries	As bibliotecas de componentes do React vêm em dois sabores: bibliotecas completas como Ant...
useCallback	useCallback cacheia uma referência de função: enquanto as dependências se mantêm iguais, e...
useContext	useContext recebe um objeto Context criado por createContext e retorna o valor do Provider...
useDebounce	useDebounce recebe um valor que muda rapidamente, como o texto de uma caixa de busca, e re...
useEffect	useEffect é o lar declarativo para efeitos colaterais — busca de dados, inscrições, tempor...
useFetch Pattern	Extraia a lógica de requisição de três estados para um Hook personalizado useFetch(url): u...
useLocalStorage	useLocalStorage mantém as leituras e escritas de useState em sincronia com localStorage: e...
useMemo	useMemo armazena em cache o resultado de uma computação: enquanto as dependências se mantê...
useMutation	useMutation gerencia o estado assíncrono de operações de escrita (POST, PUT, DELETE): muta...
useNavigate	O useNavigate retorna uma função navigate: ir para a página inicial após entrar, voltar pa...
useParams	O useParams retorna um objeto com os segmentos dinâmicos da rota atualmente correspondente...
useQuery	useQuery do TanStack Query gerencia todo o ciclo de vida da requisição mais o cache: ele d...
useReducer	useReducer concentra a pergunta "como o estado muda?" em uma única função redutora pura: d...
useRef	useRef retorna um contêiner com uma propriedade current: ele mantém qualquer valor vivo en...
useRef as Container	Um ref não serve só para o DOM: é uma caixa de nota adesiva que sobrevive a renderizações ...
useState	O useState adiciona uma variável de estado a um componente de função: ele devolve o valor ...
V
Virtual DOM	O DOM virtual é uma árvore leve de objetos JavaScript comuns que o React mantém na memória...
Vite Setup	O Vite é o gerador de projetos React mais usado hoje: um comando cria um ambiente de desen...
Vitest + RTL	O Vitest é um runner de testes muito rápido que compartilha sua configuração com o Vite, e...
W
When Not to Memo	memo, useMemo e useCallback não são de graça: comparar e cachear custa algo e o código fic...
Z
Zustand	O Zustand é uma biblioteca de estado global mínima: create define um store, os componentes...

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós