Folha de referência React
Uma referência React 19 pesquisável e imprimível — componentes, JSX, hooks, as novas APIs Actions, contexto, refs e desempenho. Grátis.
Componentes e JSX
12function App() { return <h1>Hi</h1>; }
Um componente de função que retorna JSX
export default function App() {}
Exporta um componente por padrão
<Greeting name="Ada" />
Renderiza um componente com props
{1 + 2} or {user.name}
Incorpora uma expressão JS com chavetas
<>{a}{b}</>
Fragment agrupa nós, sem DOM extra
<div className="card">
Usa className, não class, para CSS
{isOpen && <Menu />}
Renderiza condicionalmente com &&
{ok ? <Yes /> : <No />}
Escolhe entre nós com um ternário
{items.map(i => <li key={i.id}>{i.t}</li>)}
Renderiza uma lista a partir de um array
function Btn({ label, onClick }) {}
Desestrutura props na assinatura
function Card({ children }) { return children; }
Lê JSX aninhado pela prop children
<input value={v} onChange={onChange} />
Input controlado ligado ao estado
Renderização e configuração
10import { createRoot } from 'react-dom/client'
Importa a API de root do cliente
createRoot(document.getElementById('root')).render(<App/>)
Monta a app no DOM
import { StrictMode } from 'react'
Importa o wrapper StrictMode
<StrictMode><App /></StrictMode>
Expõe bugs em desenvolvimento
import { hydrateRoot } from 'react-dom/client'
Importa a API de hidratação
hydrateRoot(el, <App />)
Liga o React ao HTML do servidor
root.unmount()
Desmonta um root montado
import App from './App.jsx'
Importa um componente de um módulo
<App {...props} />
Espalha um objeto como props
export { Button, Card }
Exporta vários componentes por nome
Estado e efeitos
12const [count, setCount] = useState(0)
Declara uma variável de estado
setCount(c => c + 1)
Atualiza a partir do valor anterior
setUser(u => ({ ...u, name }))
Atualiza estado de objeto de forma imutável
useEffect(() => { run(); }, [dep])
Executa um efeito quando as deps mudam
useEffect(() => { /* once */ }, [])
Executa um efeito só na montagem
useEffect(() => () => cleanup(), [])
Retorna uma função de limpeza
const ref = useRef(null)
Guarda um valor mutável entre renderizações
const [state, dispatch] = useReducer(r, init)
Gere estado complexo com um reducer
const theme = useContext(ThemeContext)
Lê o valor de contexto mais próximo
const memo = useMemo(() => calc(a), [a])
Memoiza uma computação custosa
useLayoutEffect(() => {}, [])
Executa de forma síncrona após o layout
useSyncExternalStore(sub, get)
Subscreve a uma store externa
Hooks e APIs do React 19
12import { use } from 'react'
Importa a nova API use
const data = use(promise)
Lê uma promise, suspende até estar pronta
const theme = use(ThemeContext)
Lê contexto, permitido condicionalmente
const [state, action, pending] = useActionState(fn, init)
Acompanha estado, ação e pendência
const [opt, addOpt] = useOptimistic(state, reducer)
Mostra um valor otimista instantaneamente
const { pending } = useFormStatus()
Lê o estado de submit do formulário pai
const [isPending, startTransition] = useTransition()
Marca atualizações como não urgentes
startTransition(async () => await save())
Executa uma Action assíncrona numa transição
const deferred = useDeferredValue(value)
Adia um valor para manter a UI responsiva
const id = useId()
Gera um id único e estável
<title>Page title</title>
Renderiza metadados em qualquer ponto da árvore
function Input({ ref }) {}
ref é uma prop normal, sem forwardRef
Formulários e Actions
12<form action={handleSubmit}>
Passa uma função como Action de formulário
function handleSubmit(formData) {}
A Action recebe o FormData
formData.get('email')
Lê um campo do FormData
const [state, action] = useActionState(submit, null)
Liga uma Action ao estado do componente
<form action={action}>
Usa a Action envolvida no formulário
const [s, a, pending] = useActionState(fn, init)
Expõe uma flag de pendência para a UI
return { error: 'Invalid' }
Retorna estado de erro de uma Action
function Submit() { const { pending } = useFormStatus() }
Lê o pending dentro do botão de submit
<button disabled={pending}>Save</button>
Desativa o submit enquanto pendente
import { requestFormReset } from 'react-dom'
Importa o auxiliar de reset de formulário
requestFormReset(formEl)
Repõe um formulário não controlado
<form action={action}><Submit /></form>
Compõe um formulário Action com estado
Props e composição
10function Hi({ name = 'Guest' }) {}
Prop padrão via desestruturação
function Box({ children }) { return children; }
Envolve conteúdo com a prop children
<Box><p>Inside</p></Box>
Passa JSX como children
function List({ render }) { return render(); }
Padrão render prop
<List render={() => <Item />} />
Fornece uma função de renderização
<Input {...props} />
Encaminha todas as props com spread
const { id, ...rest } = props
Escolhe uma prop e passa o resto
<Avatar {...rest} size="lg" />
Espalha e depois sobrepõe uma prop
function Btn(props: BtnProps) {}
Tipa props com interfaces TypeScript
<Slot label={<b>Hi</b>} />
Passa JSX por uma prop nomeada
Eventos
10<button onClick={handleClick}>
Anexa um manipulador de clique
function handleClick(e) {}
Recebe o evento sintético
<input onChange={e => set(e.target.value)} />
Lê o valor de um input no change
<form onSubmit={e => e.preventDefault()}>
Impede o submit padrão do formulário
e.stopPropagation()
Impede a propagação do evento
<li onClick={() => remove(id)}>
Passa argumentos com uma closure
<input onKeyDown={e => e.key === 'Enter'}
Trata uma tecla específica
<div onMouseEnter={hover}>
Escuta eventos de ponteiro
e.currentTarget.value
Lê o elemento onde o manipulador está
<button onClick={() => {}} type="button">
Evita o envio implícito do formulário
Listas e keys
10arr.map(x => <li key={x.id}>{x.t}</li>)
Renderiza um nó por item
key={item.id}
Dá a cada item uma key estável
key={index}
Keys de índice só para listas estáticas
users.map(u => <Card key={u.id} {...u} />)
Espalha os campos do item como props
{list.length === 0 && <Empty />}
Mostra um fallback para listas vazias
import { Fragment } from 'react'
Importa Fragment para grupos com key
<Fragment key={id}>{a}{b}</Fragment>
Um fragment com key numa lista
{rows.filter(r => r.on).map(...)}
Filtra antes de mapear
Keys must be unique among siblings
Porque as keys ajudam o React a comparar listas
{[...Array(n)].map((_, i) => ...)}
Mapeia um intervalo de comprimento fixo
Contexto
10const ThemeContext = createContext('light')
Cria um contexto com um padrão
import { createContext } from 'react'
Importa a fábrica de contexto
<ThemeContext value={theme}>
Fornece um valor (sintaxe React 19)
<ThemeContext value={theme}><App /></ThemeContext>
Envolve a árvore que o lê
const theme = useContext(ThemeContext)
Lê contexto com useContext
const theme = use(ThemeContext)
Lê contexto com a API use
if (cond) { const t = use(Ctx); }
use pode ler contexto condicionalmente
export const ThemeContext = createContext()
Exporta um contexto partilhado
<Ctx value={{ user, setUser }}>
Passa um objeto como valor
Avoid new objects each render
Memoiza valores para limitar re-renderizações
Refs
10const inputRef = useRef(null)
Cria um contentor de ref
<input ref={inputRef} />
Anexa o ref a um nó
inputRef.current.focus()
Acede ao nó DOM via current
function Field({ ref }) { return <input ref={ref} /> }
ref como prop, sem forwardRef
<Field ref={inputRef} />
Passa um ref a um componente
useImperativeHandle(ref, () => ({ focus }))
Expõe uma API imperativa
const setRef = node => { box = node; }
Usa um callback ref
<div ref={setRef} />
Anexa um callback ref
const count = useRef(0)
Guarda um valor sem re-renderizar
ref={node => { return () => cleanup(); }}
Callback ref com limpeza (React 19)
Desempenho
10const Memo = memo(Component)
Salta a re-renderização quando as props são iguais
import { memo } from 'react'
Importa o auxiliar memo
const value = useMemo(() => calc(a), [a])
Faz cache de um valor computado
const fn = useCallback(() => f(a), [a])
Faz cache da identidade de uma função
const Lazy = lazy(() => import('./Big.jsx'))
Faz code-split de um componente
import { lazy, Suspense } from 'react'
Importa lazy e Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Mostra um fallback durante o carregamento
startTransition(() => setQuery(q))
Marca atualizações de estado não urgentes
const slow = useDeferredValue(query)
Adia UI derivada custosa
React Compiler auto-memoizes
Muitas vezes elimina a memoização manual
Diversos e metadados
10<Suspense fallback={<Loading />}>
Fronteira para conteúdo assíncrono
class ErrorBoundary extends Component {}
Captura erros de renderização (classe legada)
<title>My Page</title>
Eleva o título do documento de um componente
<meta name="description" content="..." />
Renderiza meta tags no head
<link rel="stylesheet" href="..." />
Eleva um link de folha de estilos
<Comp key={id} />
Muda a key para remontar um componente
React.lazy(() => import('./Page.jsx'))
Importa um componente de rota de forma lazy
createPortal(node, container)
Renderiza num nó DOM diferente
{/* a comment */}
Escreve um comentário dentro de JSX
cleanup return in useEffect
Liberta sempre subscrições/temporizadores
Nenhuma entrada corresponde a “:q”.
Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.