React 19: novedades, APIs eliminadas y cómo actualizar

Q: ¿forwardRef está obsoleto en React 19?

Los componentes de función ahora pueden recibir ref como prop normal, así que el código nuevo no necesita forwardRef. Sigue funcionando, y el equipo de React dijo que se declarará obsoleto en una versión futura.

Q: ¿React 19 rompe mi app de React 18?

Sobre todo por las APIs que se eliminaron: ReactDOM.render, findDOMNode, las string refs, el contexto heredado, propTypes y defaultProps en componentes de función. React 19 también requiere la transformación moderna de JSX. Actualiza primero a React 18.3, corrige sus advertencias de obsolescencia y luego ejecuta los codemods de React 19.

React 19 es la versión mayor de React publicada en diciembre de 2024. Agrega las Actions (funciones async que gestionan el estado pendiente, los errores y los formularios), los hooks useActionState, useOptimistic y use, ref como prop normal, y las etiquetas <title> y <meta> que React mueve al head del documento. React 19.2 (octubre de 2025) agregó <Activity> y useEffectEvent.

Todos los ejemplos de abajo se ejecutan en React 19.2. Aquí tienes una Action: una función async pasada a un formulario, con el estado pendiente y el error devuelto manejados por useActionState.

import { useActionState } from 'react';

function saveName(name) {
    // Stands in for a real request
    return new Promise((resolve) => setTimeout(resolve, 800));
}

async function updateName(previousState, formData) {
    const name = formData.get('name').trim();
    if (!name) {
        return { error: 'Please type a name.', saved: previousState.saved };
    }
    await saveName(name);
    return { error: null, saved: name };
}

export default function App() {
    const [state, formAction, isPending] = useActionState(updateName, {
        error: null,
        saved: null,
    });

    return (
        <form action={formAction}>
            <input name="name" placeholder="Your name" />
            <button type="submit" disabled={isPending}>
                {isPending ? 'Saving...' : 'Save'}
            </button>
            {state.error && <p style={{ color: 'crimson' }}>{state.error}</p>}
            {state.saved && <p>Saved as {state.saved}.</p>}
        </form>
    );
}

Pulsa Save con el campo vacío para ver el error, luego escribe un nombre y guarda: el botón dice "Saving..." durante 800 ms. No hay useState para el error, ni bandera isLoading, ni e.preventDefault().

Actions y acciones de formulario

En React 18 escribías los mismos pasos para cada formulario: evitar el envío por defecto, activar una bandera de carga, esperar la petición, guardar un error, desactivar la bandera. React 19 llama Action a una función que hace trabajo async dentro de una transición, y hace esa contabilidad por ti.

startTransition (y useTransition) ahora aceptan una función async. isPending se queda en true hasta que termina toda la función.
<form action={fn}> llama a fn con el FormData del formulario cuando se envía. Se ejecuta como una Action, y cuando termina React reinicia los campos no controlados del formulario.
<button formAction={fn}> le da a un botón de envío su propia acción.
useActionState guarda el último valor que devolvió la acción, así que una acción puede devolver un mensaje de error o el registro guardado.
useFormStatus de react-dom permite que un componente dentro de un formulario sepa si ese formulario se está enviando, sin pasar props hacia abajo. Necesita un <form> padre, así que aquí aparece en un bloque estático:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
    const { pending } = useFormStatus();
    return <button disabled={pending}>{pending ? 'Sending...' : 'Send'}</button>;
}

useOptimistic

useOptimistic muestra el resultado que esperas mientras una Action todavía se está ejecutando, y vuelve al estado real cuando la Action termina. Un contador de me gusta puede subir en el momento en que haces clic, y volver a bajar si la petición falla.

const [optimisticLikes, addOptimisticLike] = useOptimistic(likes, (current, delta) => current + delta);

La página de useOptimistic tiene un ejemplo ejecutable con una API falsa que falla a propósito, para que veas la reversión.

La API use

use lee un valor de una promesa o de un contexto. Con una promesa, suspende el componente hasta que la promesa se resuelve, y el <Suspense> más cercano muestra su fallback mientras tanto. A diferencia de todos los demás hooks, use se puede llamar dentro de un if o un bucle, y después de un return temprano.

React 19 también te permite renderizar <ThemeContext value="dark"> directamente en lugar de <ThemeContext.Provider>. Ambas cosas aparecen en este ejemplo:

import { createContext, use, useState } from 'react';

const ThemeContext = createContext('light');

function Badge({ show }) {
    if (!show) return null;
    // A normal hook could not be called after an early return. use can.
    const theme = use(ThemeContext);
    const dark = theme === 'dark';
    return (
        <span style={{ padding: '2px 8px', background: dark ? '#222' : '#eee', color: dark ? '#fff' : '#222' }}>
            Theme: {theme}
        </span>
    );
}

export default function App() {
    const [theme, setTheme] = useState('light');
    const [show, setShow] = useState(true);

    return (
        <ThemeContext value={theme}>
            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Switch theme</button>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} badge</button>
            <p>
                <Badge show={show} />
            </p>
        </ThemeContext>
    );
}

ref como prop, y limpieza de refs

Un componente de función ahora recibe ref como cualquier otra prop. Ya no necesitas envolverlo en forwardRef para pasar una ref hasta un elemento del DOM.

import { useRef } from 'react';

function TextField({ label, ref }) {
    return (
        <label>
            {label} <input ref={ref} />
        </label>
    );
}

export default function App() {
    const inputRef = useRef(null);

    return (
        <div>
            <TextField label="Email" ref={inputRef} />
            <button onClick={() => inputRef.current.focus()}>Focus the field</button>
        </div>
    );
}

Una ref callback también puede devolver una función de limpieza. React la llama cuando el elemento sale de la pantalla, igual que funciona la limpieza de un efecto. Una callback que no devuelve nada se sigue llamando con null al quitar el elemento, como en React 18.

import { useState } from 'react';

export default function App() {
    const [visible, setVisible] = useState(true);

    return (
        <div>
            <button onClick={() => setVisible(!visible)}>{visible ? 'Remove' : 'Add'} the box</button>
            {visible && (
                <div
                    ref={(node) => {
                        console.log('attached to', node.tagName);
                        return () => console.log('cleanup: detached');
                    }}
                    style={{ marginTop: 8, padding: 12, background: '#e8f0fe' }}
                >
                    A box with a ref
                </div>
            )}
        </div>
    );
}

Haz clic en el botón varias veces y lee la consola: cada eliminación registra la línea de limpieza, cada regreso registra attached to DIV.

Metadatos del documento

Puedes renderizar <title>, <meta> y <link> en cualquier parte de un componente, y React los mueve a <head>. Un componente de página puede definir su propio título sin una librería como react-helmet.

import { useEffect, useState } from 'react';

function Article({ title }) {
    return (
        <article>
            <title>{title}</title>
            <meta name="description" content={`An article about ${title}`} />
            <h3>{title}</h3>
        </article>
    );
}

export default function App() {
    const [title, setTitle] = useState('Hooks');

    useEffect(() => {
        console.log('document.title is now:', document.title);
    }, [title]);

    return (
        <div>
            <button onClick={() => setTitle(title === 'Hooks' ? 'Actions' : 'Hooks')}>Open the other article</button>
            <Article title={title} />
        </div>
    );
}

La vista previa no tiene una pestaña del navegador que mostrar, así que el efecto registra document.title. Cambia de artículo y el título registrado lo sigue.

Las hojas de estilo recibieron el mismo trato: un <link rel="stylesheet" href="..." precedence="default" /> dentro de un componente se inserta en el head una sola vez, en orden de precedencia, y React lo espera antes de mostrar el contenido que lo necesita. Un <script async src="..."> renderizado por varios componentes se carga solo una vez. react-dom también exporta preload, preinit, preconnect y prefetchDNS para las sugerencias de recursos.

Activity y useEffectEvent (React 19.2)

<Activity mode="hidden"> oculta sus hijos sin descartar su estado. React oculta el DOM, ejecuta las limpiezas de los efectos y restaura todo cuando el modo vuelve a ser "visible". Encaja con pestañas y paneles a los que esperas que el usuario vuelva.

import { Activity, useEffect, useState } from 'react';

function Notes() {
    const [text, setText] = useState('');
    useEffect(() => {
        console.log('Notes effect: setup');
        return () => console.log('Notes effect: cleanup');
    }, []);
    return <textarea value={text} onChange={(e) => setText(e.target.value)} rows={3} placeholder="Type a note" />;
}

export default function App() {
    const [tab, setTab] = useState('notes');

    return (
        <div>
            <button onClick={() => setTab('notes')}>Notes</button>
            <button onClick={() => setTab('about')}>About</button>
            <div style={{ marginTop: 8 }}>
                <Activity mode={tab === 'notes' ? 'visible' : 'hidden'}>
                    <Notes />
                </Activity>
                {tab === 'about' && <p>Your note is kept while this tab is open.</p>}
            </div>
        </div>
    );
}

Escribe una nota, cambia a About y vuelve. El texto sigue ahí, y la consola muestra que el efecto se limpió mientras estaba oculto. Reemplaza el envoltorio <Activity> por {tab === 'notes' && <Notes />} y la nota se pierde en cada cambio.

useEffectEvent saca una función de las dependencias de un efecto. La función siempre ve las props y el estado más recientes, pero cambiarlos no reinicia el efecto:

function ChatRoom({ roomId, theme }) {
    const onConnected = useEffectEvent(() => {
        showNotification('Connected!', theme);
    });

    useEffect(() => {
        const connection = createConnection(roomId);
        connection.on('connected', () => onConnected());
        connection.connect();
        return () => connection.disconnect();
    }, [roomId]); // theme is not a dependency
}

19.2 también agregó cacheSignal para los Server Components (te avisa cuando un resultado de cache() ya no se necesita) y los Performance Tracks en el panel de rendimiento de Chrome DevTools. React 19.1 agregó captureOwnerStack, una función solo para desarrollo que devuelve qué componentes renderizaron el actual.

Server Components y Server Functions

Los Server Components son componentes que se ejecutan por adelantado en el servidor (o al hacer el build) y envían su resultado al navegador. Pueden ser async y leer una base de datos directamente, y su código nunca llega al cliente. Las Server Functions (antes llamadas Server Actions) son funciones async marcadas con 'use server' que un componente de cliente puede llamar como una función normal. Ambas necesitan un framework con un bundler que las admita, como el App Router de Next.js, así que no pueden ejecutarse en este editor.

// A Server Component: async, runs on the server only
export default async function Notes() {
    const notes = await db.notes.findMany();
    return notes.map((note) => <Note key={note.id} note={note} />);
}

// A Server Function, usable as a form action
async function createNote(formData) {
    'use server';
    await db.notes.create({ text: formData.get('text') });
}

APIs eliminadas y cambiadas

React 19 eliminó APIs que llevaban años obsoletas:

Eliminada	Usa en su lugar
`ReactDOM.render`, `ReactDOM.hydrate`	`createRoot`, `hydrateRoot` de `react-dom/client`
`unmountComponentAtNode`	`root.unmount()`
`findDOMNode`	una ref en el elemento del DOM
String refs (`ref="input"`)	`useRef` o una ref callback
Contexto heredado (`contextTypes`, `getChildContext`)	`createContext` con `static contextType` o `use`
Comprobaciones de `propTypes` (ahora se ignoran en silencio)	TypeScript, o tus propias comprobaciones
`defaultProps` en componentes de función	valores por defecto de los parámetros
`react-dom/test-utils`	`act` de `react`; React Testing Library para lo demás
`react-test-renderer/shallow`	el paquete `react-shallow-renderer`
`React.createFactory`	JSX

Los componentes de clase conservan defaultProps. Los errores también se reportan de otra forma: los errores capturados por un error boundary se registran una vez con console.error, los no capturados van a window.reportError, y createRoot acepta las opciones onCaughtError y onUncaughtError para que los reportes tú mismo.

Actualizar a React 19

Actualiza primero a React 18.3. Es idéntica a 18.2 pero avisa sobre las APIs obsoletas y otros cambios que necesita React 19, así puedes corregirlos mientras la app todavía funciona. React 19 también requiere la transformación moderna de JSX, que Vite y todos los frameworks actuales ya usan. Luego instala React 19:

npm install react@^19 react-dom@^19
npm install --save-dev @types/react@^19 @types/react-dom@^19

La guía oficial de actualización indica codemods para los cambios mecánicos. El primero cubre string refs, imports de act y ReactDOM.render; el segundo actualiza el código TypeScript para los nuevos tipos:

npx codemod@latest react/19/migration-recipe
npx types-react-codemod@latest preset-19 ./src

Después de actualizar, nada te obliga a adoptar las Actions ni los nuevos hooks. Los componentes, hooks y componentes de clase existentes siguen funcionando; puedes pasar los formularios a <form action> de uno en uno.

Preguntas frecuentes

¿Cuándo salió React 19?

React 19 pasó a ser estable en diciembre de 2024. React 19.1 llegó en marzo de 2025 y React 19.2 en octubre de 2025.

¿Cuáles son los cambios más grandes de React 19?

Las Actions (funciones async que manejan por ti el estado pendiente, los errores y los formularios), los hooks useActionState, useOptimistic y use, ref como prop normal, <Context> como proveedor, y las etiquetas <title> y <meta> que se mueven al head del documento. Los Server Components pasaron a ser estables para los frameworks.

¿forwardRef está obsoleto en React 19?

Los componentes de función ahora pueden recibir ref como prop normal, así que el código nuevo no necesita forwardRef. Sigue funcionando, y el equipo de React dijo que se declarará obsoleto en una versión futura.

¿React 19 rompe mi app de React 18?

Sobre todo por las APIs que se eliminaron: ReactDOM.render, findDOMNode, las string refs, el contexto heredado, propTypes y defaultProps en componentes de función. React 19 también requiere la transformación moderna de JSX. Actualiza primero a React 18.3, corrige sus advertencias de obsolescencia y luego ejecuta los codemods de React 19.

¿Necesito Next.js para usar React 19?

No. Las Actions, los nuevos hooks, ref como prop y los metadatos funcionan en una app de cliente normal hecha con Vite. Los Server Components y las Server Functions necesitan un framework que los admita, como Next.js.

Conceptos relacionados