react-docs

React 19.3

Visão Geral

Esta skill contém as regras do React 19.3 que são fáceis de errar: Effects que não deveriam existir, armadilhas de dependências, Actions e suas Transitions, limites de Server Components, adoção do React Compiler e as APIs removidas ou descontinuadas na versão 19. Cada afirmação possui o link da sua página.

Versão coberta

React 19.3, a versão que o react.dev documenta. As versões anteriores estão em 18.react.dev e sites mais antigos. https://react.dev/versions

Leia o guia de início rápido e depois abra o arquivo de referência que corresponde à tarefa.

Início rápido

• Use um Effect apenas para sincronizar com um sistema que o React não controla. Derive valores durante a renderização, redefina o estado com uma key e execute lógica causada pelo usuário em manipuladores de eventos. https://react.dev/learn/you-might-not-need-an-effect
• As dependências seguem o código: nunca suprima react-hooks/exhaustive-deps. Para remover uma, mova objetos e funções para dentro do Effect, use um updater ou leia o valor de um Effect Event. https://react.dev/learn/removing-effect-dependencies

const onConnected = useEffectEvent(() => {
  showNotification('Conectado!', theme);
});
useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.on('connected', () => { onConnected(); });
  connection.connect();
  return () => connection.disconnect();
}, [roomId]);

https://react.dev/learn/separating-events-from-effects

• Um Effect deve sobreviver a setup, cleanup, setup: Strict Mode executa isso em desenvolvimento. Corrija o cleanup, nunca esconda a segunda execução com um guard de ref. https://react.dev/learn/synchronizing-with-effects
• ref é uma prop de componentes de função. Renderize <Context value={x}> como o provider. Um callback de ref pode retornar seu cleanup. https://react.dev/reference/react/useRef e https://react.dev/reference/react/createContext e https://react.dev/reference/react-dom/components/common
• Um estado definido após um await dentro de startTransition não é uma Transition: envolva-o em outro startTransition. https://react.dev/reference/react/useTransition
• Com <form action>, o reducer de useActionState recebe (prevState, formData). Chame dispatchAction de uma Action: um <form action> ou startTransition. https://react.dev/reference/react/useActionState
• useFormStatus lê apenas o <form> pai: chame-o em um componente filho. https://react.dev/reference/react-dom/hooks/useFormStatus
• use(promise) precisa de uma Promise em cache: uma criada durante a renderização é recriada a cada renderização. Nunca envolva use em try/catch: use um Error Boundary. https://react.dev/reference/react/use
• 'use server' marca Server Functions, nunca Server Components, que não têm diretiva. Valide todos os argumentos de Server Function e verifique a autorização. https://react.dev/reference/rsc/server-components e https://react.dev/reference/rsc/use-server
• Componente apenas para navegador: use(browser()), browser de react-dom, sob um limite <Suspense>, em vez de typeof window ou uma flag de montagem. https://react.dev/reference/react-dom/browser
• Com o React Compiler, escreva código simples e mantenha useMemo ou useCallback apenas para controle preciso, como uma dependência de Effect. Deixe a memoização existente no lugar. https://react.dev/learn/react-compiler/introduction
• Lint com eslint-plugin-react-hooks recommended. Ele contém as regras do compilador, então remova eslint-plugin-react-compiler. https://react.dev/blog/2025/10/07/react-compiler-1
• Defina componentes no nível do módulo, nunca dentro de outro componente. https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components
• Nunca coloque um número à esquerda de &&: count && <p/> renderiza 0. https://react.dev/learn/conditional-rendering

Arquivos de referência

Arquivo	Abra para
references/state.md	useState, updaters, set durante renderização, useReducer, atualizações imutáveis, estrutura do estado, key redefine
references/refs-and-context.md	useRef, callbacks de ref, ref como prop, useImperativeHandle, context, useId, useSyncExternalStore
references/effects.md	Quando não usar um Effect, tempo do useEffect, cleanup do Strict Mode, fetching, useLayoutEffect, useInsertionEffect
references/effect-dependencies.md	Removendo dependências, useEffectEvent, custom Hooks, additionalEffectHooks
references/memoization.md	useMemo, useCallback, memo, com e sem o compilador
references/react-compiler.md	Instalando, opções, diretivas, adoção incremental, depuração do compilador
references/rules-and-lints.md	Regras do React, Regras dos Hooks, regras do eslint-plugin-react-hooks, Strict Mode
references/components-and-tooling.md	Keys, renderização condicional, Fragment refs, Profiler, act, TypeScript, DevTools
references/transitions-and-suspense.md	useTransition, startTransition, useDeferredValue, use, lazy, <Suspense>
references/view-transitions-and-activity.md	<ViewTransition>, addTransitionType, <Activity>
references/actions-and-optimistic.md	useActionState, useOptimistic, useFormStatus, <form action>
references/form-elements-and-events.md	Inputs controlados, <select>, <textarea>, props comuns, eventos, elementos customizados
references/server-components.md	Server Components, 'use client', props serializáveis, cache, cacheSignal, taint
references/server-functions.md	'use server', chamando Server Functions, permalink, segurança
references/client-roots-and-hydration.md	createRoot, hydrateRoot, incompatibilidades, relatório de erros, Error Boundaries
references/server-rendering.md	renderToPipeableStream, renderToReadableStream, códigos de status, prerender, resume
references/dom-apis-and-resources.md	browser, createPortal, flushSync, preload, preinit, <img>, <link>, <script>, <title>
references/upgrading-to-19.md	Passos de upgrade, codemods, APIs removidas e descontinuadas, mudanças no TypeScript, 19.2 e 19.3
references/legacy-apis.md	Children, cloneElement, componentes de classe, forwardRef, PureComponent

Padrões antigos

Uso antigo	Substituição	Fonte
forwardRef((props, ref) => ...)	function MyInput({ ref, ...props })	https://react.dev/reference/react/forwardRef
<Context.Provider value={x}>	<Context value={x}>	https://react.dev/reference/react/createContext
Render prop de <Context.Consumer>	useContext(Context) ou use(Context)	https://react.dev/reference/react/createContext
ReactDOM.useFormState	useActionState de react	https://react.dev/blog/2024/12/05/react-19
ReactDOM.render, ReactDOM.hydrate	createRoot(el).render(), hydrateRoot	https://react.dev/reference/react-dom
unmountComponentAtNode	root.unmount()	https://react.dev/reference/react-dom
findDOMNode	DOM refs	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
String refs, this.refs	Callbacks de ref ou createRef	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
contextTypes, getChildContext	createContext, static contextType	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
element.ref	element.props.ref	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
react-test-renderer, shallow rendering	Testing Library	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
Namespace global JSX em tipos	declare module "react" { namespace JSX {} }	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
Tag de script UMD build	ESM CDN como esm.sh	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
propTypes	TypeScript	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
defaultProps em um componente de função	Parâmetros padrão ES	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
import { act } from 'react-dom/test-utils'	import { act } from 'react'	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
act(() => ...) síncrono	await act(async () => ...)	https://react.dev/reference/react/act
Callback de ref dependendo de chamada null	Retorne uma função de cleanup	https://react.dev/reference/react-dom/components/common
renderToString para SSR	renderToPipeableStream ou renderToReadableStream	https://react.dev/reference/react-dom/server/renderToString
renderToNodeStream, renderToStaticNodeStream	APIs de streaming de react-dom/server	https://react.dev/reference/react-dom
Lançar no servidor para pular SSR	use(browser())	https://react.dev/reference/react/Suspense
Estado isClient definido em um Effect, typeof window na renderização	use(browser()) sob <Suspense>	https://react.dev/reference/react-dom/browser
eslint-plugin-react-compiler	eslint-plugin-react-hooks	https://react.dev/blog/2025/10/07/react-compiler-1
"use no forget"	"use no memo"	https://react.dev/reference/react-compiler/directives/use-no-memo
react({ babel: { plugins: [...] } }) no @vitejs/plugin-react 6	reactCompilerPreset com @rolldown/plugin-babel	https://react.dev/learn/react-compiler/installation
componentWillMount, componentWillReceiveProps, componentWillUpdate	Nomes UNSAFE_, ou alternativas da página	https://react.dev/reference/react/Component