react-docs

React 19.3

Resumen

Este skill contiene las reglas de React 19.3 que son fáciles de aplicar incorrectamente: Efectos que no deberían existir, trampas de dependencias, Acciones y sus Transiciones, límites de Server Components, adopción de React Compiler y las APIs eliminadas u obsoletas en la versión 19. Cada afirmación incluye el enlace a su página correspondiente.

Versión cubierta

React 19.3, la versión que documenta react.dev. Las versiones anteriores se encuentran en 18.react.dev y sitios antiguos. https://react.dev/versions

Lee la guía de inicio rápido y luego abre el archivo de referencia que corresponda a la tarea.

Inicio rápido

• Usa un Efecto solo para sincronizar con un sistema que React no controla. Deriva valores durante el renderizado, restablece el estado con una key y ejecuta la lógica iniciada por el usuario en manejadores de eventos. https://react.dev/learn/you-might-not-need-an-effect
• Las dependencias siguen al código: nunca suprimas react-hooks/exhaustive-deps. Para eliminar una, mueve objetos y funciones dentro del Efecto, usa un actualizador o lee el valor desde un Evento de Efecto. 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

• Un Efecto debe soportar configuración, limpieza, configuración: Strict Mode ejecuta eso en desarrollo. Arregla la limpieza, nunca ocultes la segunda ejecución con un guardia de ref. https://react.dev/learn/synchronizing-with-effects
• ref es una prop de los componentes de función. Renderiza <Context value={x}> como el proveedor. Una callback de ref puede devolver su limpieza. https://react.dev/reference/react/useRef y https://react.dev/reference/react/createContext y https://react.dev/reference/react-dom/components/common
• El estado establecido después de un await dentro de startTransition no es una Transición: envuélvelo en otro startTransition. https://react.dev/reference/react/useTransition
• Con <form action>, el reducer de useActionState recibe (prevState, formData). Llama a dispatchAction desde una Acción: un <form action> o startTransition. https://react.dev/reference/react/useActionState
• useFormStatus lee solo el <form> padre: llámalo en un componente hijo. https://react.dev/reference/react-dom/hooks/useFormStatus
• use(promise) necesita una Promise cacheada: una creada durante el renderizado se recrea en cada renderizado. Nunca envuelvas use en try/catch: usa un Error Boundary. https://react.dev/reference/react/use
• 'use server' marca Server Functions, nunca Server Components, que no tienen directiva. Valida cada argumento de Server Function y verifica la autorización. https://react.dev/reference/rsc/server-components y https://react.dev/reference/rsc/use-server
• Componente solo para navegador: use(browser()), browser de react-dom, bajo un <Suspense> boundary, en lugar de typeof window o una bandera montada. https://react.dev/reference/react-dom/browser
• Con React Compiler, escribe código simple y mantén useMemo o useCallback solo para control preciso, como una dependencia de Efecto. Deja la memoización existente en su lugar. https://react.dev/learn/react-compiler/introduction
• Lint con eslint-plugin-react-hooks recommended. Contiene las reglas del compilador, por lo que debes eliminar eslint-plugin-react-compiler. https://react.dev/blog/2025/10/07/react-compiler-1
• Define componentes a nivel de módulo, nunca dentro de otro componente. https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components
• Nunca pongas un número a la izquierda de &&: count && <p/> renderiza 0. https://react.dev/learn/conditional-rendering

Archivos de referencia

Archivo	Ábrelo para
references/state.md	useState, actualizadores, establecer durante el renderizado, useReducer, actualizaciones inmutables, estructura del estado, reseteos con key
references/refs-and-context.md	useRef, callbacks de ref, ref como prop, useImperativeHandle, contexto, useId, useSyncExternalStore
references/effects.md	Cuándo no usar un Efecto, temporización de useEffect, limpieza en Strict Mode, fetching, useLayoutEffect, useInsertionEffect
references/effect-dependencies.md	Eliminar dependencias, useEffectEvent, Hooks personalizados, additionalEffectHooks
references/memoization.md	useMemo, useCallback, memo, con y sin el compilador
references/react-compiler.md	Instalación, opciones, directivas, adopción incremental, depuración del compilador
references/rules-and-lints.md	Reglas de React, Reglas de Hooks, reglas de eslint-plugin-react-hooks, Strict Mode
references/components-and-tooling.md	Keys, renderizado condicional, refs de Fragment, 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 comunes, eventos, elementos personalizados
references/server-components.md	Server Components, 'use client', props serializables, cache, cacheSignal, taint
references/server-functions.md	'use server', llamar Server Functions, permalink, seguridad
references/client-roots-and-hydration.md	createRoot, hydrateRoot, desajustes, reporte de errores, Error Boundaries
references/server-rendering.md	renderToPipeableStream, renderToReadableStream, códigos de estado, prerender, resume
references/dom-apis-and-resources.md	browser, createPortal, flushSync, preload, preinit, <img>, <link>, <script>, <title>
references/upgrading-to-19.md	Pasos de actualización, codemods, APIs eliminadas y obsoletas, cambios en TypeScript, 19.2 y 19.3
references/legacy-apis.md	Children, cloneElement, componentes de clase, forwardRef, PureComponent

Patrones antiguos

Uso antiguo	Reemplazo	Fuente
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
<Context.Consumer> render prop	useContext(Context) o 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	Refs del DOM	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
String refs, this.refs	Callbacks de ref o 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
Espacio de nombres global JSX en tipos	declare module "react" { namespace JSX {} }	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
Etiqueta script con build UMD	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 en un componente de función	Parámetros por defecto de 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 que depende de una llamada con null	Devuelve una función de limpieza	https://react.dev/reference/react-dom/components/common
renderToString para SSR	renderToPipeableStream o renderToReadableStream	https://react.dev/reference/react-dom/server/renderToString
renderToNodeStream, renderToStaticNodeStream	APIs de streaming de react-dom/server	https://react.dev/reference/react-dom
Lanzar error en el servidor para omitir SSR	use(browser())	https://react.dev/reference/react/Suspense
Estado isClient establecido en un Efecto, typeof window en el renderizado	use(browser()) bajo <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: [...] } }) en @vitejs/plugin-react 6	reactCompilerPreset con @rolldown/plugin-babel	https://react.dev/learn/react-compiler/installation
componentWillMount, componentWillReceiveProps, componentWillUpdate	Nombres UNSAFE_, o las alternativas de la página	https://react.dev/reference/react/Component