React 19 : nouveautés, API supprimées et mise à jour

React 19 est la version majeure de React sortie en décembre 2024. Elle ajoute les Actions (des fonctions async qui gèrent l'état d'attente, les erreurs et les formulaires), les hooks useActionState, useOptimistic et use, ref comme prop ordinaire, et les balises <title> et <meta> que React déplace dans le head du document. React 19.2 (octobre 2025) a ajouté <Activity> et useEffectEvent.

Chaque exemple ci-dessous tourne sur React 19.2. Voici une Action : une fonction async passée à un formulaire, dont l'état d'attente et l'erreur renvoyée sont gérés par 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>
    );
}

Appuyez sur Save avec le champ vide pour voir l'erreur, puis tapez un nom et enregistrez : le bouton affiche "Saving..." pendant 800 ms. Il n'y a ni useState pour l'erreur, ni indicateur isLoading, ni e.preventDefault().

Actions et actions de formulaire

Dans React 18, vous écriviez les mêmes étapes pour chaque formulaire : empêcher l'envoi par défaut, activer un indicateur de chargement, attendre la requête, stocker une erreur, désactiver l'indicateur. React 19 appelle Action une fonction qui fait un travail async dans une transition, et s'occupe de cette gestion pour vous.

• startTransition (et useTransition) acceptent maintenant une fonction async. isPending reste à true jusqu'à la fin de toute la fonction.
• <form action={fn}> appelle fn avec le FormData du formulaire à l'envoi. Elle s'exécute comme une Action, et à la fin React réinitialise les champs non contrôlés du formulaire.
• <button formAction={fn}> donne à un bouton d'envoi sa propre action.
• useActionState garde la dernière valeur renvoyée par l'action, pour qu'une action puisse renvoyer un message d'erreur ou l'enregistrement sauvegardé.
• useFormStatus de react-dom permet à un composant à l'intérieur d'un formulaire de savoir si ce formulaire est en cours d'envoi, sans passer de props. Il a besoin d'un <form> parent, il apparaît donc ici dans un bloc statique :

import { useFormStatus } from 'react-dom';

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

useOptimistic

useOptimistic affiche le résultat attendu pendant qu'une Action est encore en cours, et revient à l'état réel quand l'Action se termine. Un compteur de likes peut augmenter dès le clic, et redescendre si la requête échoue.

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

La page sur useOptimistic propose un exemple exécutable avec une fausse API qui échoue exprès, pour que vous puissiez observer le retour en arrière.

L'API use

use lit une valeur depuis une promesse ou un contexte. Avec une promesse, il suspend le composant jusqu'à la résolution de la promesse, et le <Suspense> le plus proche affiche son contenu de repli en attendant. Contrairement à tous les autres hooks, use peut être appelé dans un if ou une boucle, et après un return anticipé.

React 19 permet aussi d'afficher directement <ThemeContext value="dark"> au lieu de <ThemeContext.Provider>. Les deux apparaissent dans cet exemple :

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 en prop, et nettoyage des refs

Un composant fonction reçoit maintenant ref comme n'importe quelle autre prop. Vous n'avez plus besoin de l'envelopper dans forwardRef pour transmettre une ref jusqu'à un élément 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>
    );
}

Une ref callback peut aussi renvoyer une fonction de nettoyage. React l'appelle quand l'élément quitte l'écran, comme le nettoyage d'un effet. Une callback qui ne renvoie rien est toujours appelée avec null au retrait, comme dans 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>
    );
}

Cliquez plusieurs fois sur le bouton et lisez la console : chaque retrait affiche la ligne de nettoyage, chaque retour affiche attached to DIV.

Métadonnées du document

Vous pouvez afficher <title>, <meta> et <link> n'importe où dans un composant, et React les déplace dans <head>. Un composant de page peut définir son propre titre sans bibliothèque comme 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>
    );
}

L'aperçu n'a pas d'onglet de navigateur à montrer, l'effet affiche donc document.title dans la console. Changez d'article et le titre affiché suit.

Les feuilles de style ont droit au même traitement : <link rel="stylesheet" href="..." precedence="default" /> dans un composant est inséré une seule fois dans le head, dans l'ordre de précédence, et React l'attend avant d'afficher le contenu qui en a besoin. Un <script async src="..."> affiché par plusieurs composants n'est chargé qu'une fois. react-dom exporte aussi preload, preinit, preconnect et prefetchDNS pour les indications de ressources.

Activity et useEffectEvent (React 19.2)

<Activity mode="hidden"> masque ses enfants sans jeter leur état. React masque le DOM, exécute les nettoyages des effets, et restaure tout quand le mode redevient "visible". C'est adapté aux onglets et aux panneaux auxquels l'utilisateur reviendra probablement.

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

Tapez une note, passez à About puis revenez. Le texte est toujours là, et la console montre que l'effet a été nettoyé pendant qu'il était masqué. Remplacez l'enveloppe <Activity> par {tab === 'notes' && <Notes />} et la note est perdue à chaque changement.

useEffectEvent sort une fonction des dépendances d'un effet. La fonction voit toujours les dernières props et le dernier état, mais leur modification ne relance pas l'effet :

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
}

La 19.2 a aussi ajouté cacheSignal pour les Server Components (il vous indique quand un résultat de cache() n'est plus nécessaire) et les Performance Tracks dans le panneau performance des Chrome DevTools. React 19.1 a ajouté captureOwnerStack, une fonction réservée au développement qui renvoie les composants ayant affiché le composant actuel.

Server Components et Server Functions

Les Server Components sont des composants qui s'exécutent à l'avance sur le serveur (ou au moment du build) et envoient leur résultat au navigateur. Ils peuvent être async et lire directement une base de données, et leur code n'est jamais envoyé au client. Les Server Functions (d'abord appelées Server Actions) sont des fonctions async marquées avec 'use server' qu'un composant client peut appeler comme une fonction normale. Les deux nécessitent un framework avec un bundler qui les prend en charge, comme l'App Router de Next.js, ils ne peuvent donc pas s'exécuter dans cet éditeur.

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

API supprimées et modifiées

React 19 a supprimé des API déclarées obsolètes depuis des années :

Les composants classes gardent defaultProps. Les erreurs sont aussi signalées différemment : les erreurs interceptées par une error boundary sont affichées une seule fois avec console.error, les erreurs non interceptées vont à window.reportError, et createRoot accepte les options onCaughtError et onUncaughtError pour les signaler vous-même.

Passer à React 19

Passez d'abord à React 18.3. Elle est identique à la 18.2 mais avertit au sujet des API obsolètes et des autres changements nécessaires pour React 19, pour que vous puissiez les corriger pendant que l'application fonctionne encore. React 19 exige aussi la transformation JSX moderne, que Vite et tous les frameworks actuels utilisent déjà. Installez ensuite React 19 :

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

Le guide officiel de mise à jour renvoie vers des codemods pour les changements mécaniques. Le premier couvre les string refs, les imports de act et ReactDOM.render ; le second met à jour le code TypeScript pour les nouveaux types :

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

Après la mise à jour, rien ne vous oblige à adopter les Actions ou les nouveaux hooks. Les composants, les hooks et les composants classes existants continuent de fonctionner ; vous pouvez migrer les formulaires vers <form action> un par un.