React 19: New Features, Removed APIs and How to Upgrade

React 19 is the major version of React released in December 2024. It adds Actions (async functions that manage pending state, errors and forms), the hooks useActionState, useOptimistic and use, ref as a regular prop, and <title> and <meta> tags that React moves into the document head. React 19.2 (October 2025) added <Activity> and useEffectEvent.

Every example below runs on React 19.2. Here is an Action: an async function passed to a form, with the pending state and the returned error handled by 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>
    );
}

Press Save with the field empty to see the error, then type a name and save: the button reads "Saving..." for 800 ms. There is no useState for the error, no isLoading flag and no e.preventDefault().

Actions and form actions

In React 18 you wrote the same steps for every form: prevent the default submit, set a loading flag, await the request, store an error, clear the flag. React 19 calls a function that does async work inside a transition an Action, and does that bookkeeping for you.

• startTransition (and useTransition) now accept an async function. isPending stays true until the whole function finishes.
• <form action={fn}> calls fn with the form's FormData when the form is submitted. It runs as an Action, and after it finishes React resets the form's uncontrolled fields.
• <button formAction={fn}> gives one submit button its own action.
• useActionState keeps the value the action last returned, so an action can return an error message or the saved record.
• useFormStatus from react-dom lets a component inside a form read whether that form is submitting, without passing props down. It needs a parent <form>, so here it appears in a static block:

import { useFormStatus } from 'react-dom';

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

useOptimistic

useOptimistic shows the result you expect while an Action is still running, and falls back to the real state when the Action ends. A like counter can go up the moment you click, and drop back if the request fails.

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

The useOptimistic page has a runnable example with a fake API that fails on purpose, so you can watch the rollback.

The use API

use reads a value from a promise or from a context. With a promise it suspends the component until the promise resolves, and the nearest <Suspense> shows its fallback meanwhile. Unlike every other hook, use can be called inside an if or a loop, and after an early return.

React 19 also lets you render <ThemeContext value="dark"> directly instead of <ThemeContext.Provider>. Both appear in this example:

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 as a prop, and ref cleanup

A function component now receives ref like any other prop. You no longer need to wrap it in forwardRef to pass a ref through to a DOM element.

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>
    );
}

A ref callback can also return a cleanup function. React calls it when the element leaves the screen, the same way an effect's cleanup works. A callback that returns nothing is still called with null on removal, as in 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>
    );
}

Click the button a few times and read the console: every removal logs the cleanup line, every return logs attached to DIV.

Document metadata

You can render <title>, <meta> and <link> anywhere in a component, and React moves them into <head>. A page component can set its own title without a library such as 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>
    );
}

The preview has no browser tab to show, so the effect logs document.title instead. Switch articles and the logged title follows.

Stylesheets got the same treatment: <link rel="stylesheet" href="..." precedence="default" /> inside a component is inserted into the head once, in precedence order, and React waits for it before showing the content that needs it. An <script async src="..."> rendered by several components loads only once. react-dom also exports preload, preinit, preconnect and prefetchDNS for resource hints.

Activity and useEffectEvent (React 19.2)

<Activity mode="hidden"> hides its children without throwing away their state. React hides the DOM, runs the effects' cleanups, and restores everything when the mode becomes "visible" again. It suits tabs and panels you expect the user to come back to.

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>
    );
}

Type a note, switch to About and back. The text is still there, and the console shows the effect cleaned up while hidden. Replace the <Activity> wrapper with {tab === 'notes' && <Notes />} and the note is lost on every switch.

useEffectEvent takes a function out of an effect's dependencies. The function always sees the latest props and state, but changing them does not restart the effect:

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 also added cacheSignal for Server Components (it tells you when a cache() result is no longer needed) and Performance Tracks in the Chrome DevTools performance panel. React 19.1 added captureOwnerStack, a development-only function that returns which components rendered the current one.

Server Components and Server Functions

Server Components are components that run ahead of time on the server (or at build time) and send their output to the browser. They can be async and read a database directly, and their code never ships to the client. Server Functions (first called Server Actions) are async functions marked with 'use server' that a client component can call like a normal function. Both need a framework with a bundler that supports them, such as the Next.js App Router, so they cannot run in this 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') });
}

Removed and changed APIs

React 19 removed APIs that had been deprecated for years:

Class components keep defaultProps. Errors are also reported differently: errors caught by an error boundary are logged with console.error once, uncaught errors go to window.reportError, and createRoot accepts onCaughtError and onUncaughtError options to report them yourself.

Upgrading to React 19

Upgrade to React 18.3 first. It is identical to 18.2 but warns about the deprecated APIs and other changes React 19 needs, so you can fix them while the app still works. React 19 also requires the modern JSX transform, which Vite and every current framework already use. Then install React 19:

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

The official upgrade guide points to codemods for the mechanical changes. The first covers string refs, act imports and ReactDOM.render; the second updates TypeScript code for the new types:

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

After upgrading, nothing forces you to adopt Actions or the new hooks. Existing components, hooks and class components keep working; you can move forms over to <form action> one at a time.