React 19 Stable : Actions, use() Hook et Optimistic UI Natives

L'équipe React a annoncé le 24 octobre 2025 la sortie de React 19 stable, marquant la plus grande évolution du framework depuis les Hooks en 2019. Les Actions, le hook use() et l'Optimistic UI native transforment radicalement la gestion d'état et les mutations asynchrones.

Actions : Mutations Simplifiées

Fini useTransition Manuel

React 19 introduit les Actions pour gérer automatiquement les états pending/error/success :

Avant React 19 (avec useTransition) :

function TodoForm() {
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState(null);

  async function handleSubmit(e) {
    e.preventDefault();
    setError(null);

    startTransition(async () => {
      try {
        const formData = new FormData(e.target);
        await createTodo(formData);
      } catch (err) {
        setError(err.message);
      }
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="title" />
      <button disabled={isPending}>
        {isPending ? 'Creating...' : 'Create'}
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

Maintenant React 19 (avec Actions) :

function TodoForm() {
  async function createAction(formData) {
    'use server'; // Optionnel pour Server Actions
    await createTodo(formData);
  }

  return (
    <form action={createAction}>
      <input name="title" />
      <button>Create</button>
    </form>
  );
}

React gère automatiquement :

• État pending pendant l'exécution
• Désactivation du bouton
• Gestion d'erreur
• Revalidation après succès

Hook useActionState

Accès aux états de l'Action :

import { useActionState } from 'react';

function TodoForm() {
  const [state, formAction, isPending] = useActionState(
    async (previousState, formData) => {
      try {
        await createTodo(formData);
        return { success: true, message: 'Todo created!' };
      } catch (error) {
        return { success: false, error: error.message };
      }
    },
    { success: false, message: '' }
  );

  return (
    <form action={formAction}>
      <input name="title" />
      <button disabled={isPending}>
        {isPending ? 'Creating...' : 'Create'}
      </button>

      {state.success && <p className="success">{state.message}</p>}
      {state.error && <p className="error">{state.error}</p>}
    </form>
  );
}

Comparaison code :

• React 18 : 25 lignes de code
• React 19 : 15 lignes de code
• 40% de réduction de boilerplate

Hook use() : Async Natif

Suspense pour Data Fetching

Le nouveau hook use() permet d'attendre des Promises directement dans les composants :

import { use } from 'react';

function UserProfile({ userPromise }) {
  // use() suspend le composant jusqu'à résolution
  const user = use(userPromise);

  return (
    <div>
      <h1&gt;{user.name}</h1&gt;
      <p>{user.email}</p>
    </div>
  );
}

// Utilisation
function App() {
  const userPromise = fetchUser(userId);

  return (
    <Suspense fallback={<Skeleton />}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

Avant React 19 (avec useEffect) :

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;

    fetchUser(userId)
      .then(data => {
        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      })
      .catch(err => {
        if (!cancelled) {
          setError(err);
          setLoading(false);
        }
      });

    return () => { cancelled = true; };
  }, [userId]);

  if (loading) return <Skeleton />;
  if (error) return <Error error={error} />;
  return <div>{user.name}</div>;
}

30 lignes vs 5 lignes !

use() avec Context

Lecture conditionnelle de Context :

import { use, createContext } from 'react';

const ThemeContext = createContext(null);

function Button({ primary }) {
  // Lecture conditionnelle impossible avec useContext
  const theme = primary ? use(ThemeContext) : null;

  return (
    <button style={{ color: theme?.primaryColor }}>
      Click me
    </button>
  );
}

use() fonctionne dans les conditions et loops (vs useContext)

Optimistic UI Intégré

Hook useOptimistic

Mise à jour optimiste automatique :

import { useOptimistic } from 'react';

function TodoList({ todos }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, { ...newTodo, pending: true }]
  );

  async function createTodo(formData) {
    const newTodo = { id: crypto.randomUUID(), title: formData.get('title') };

    // Ajout optimiste (affichage immédiat)
    addOptimisticTodo(newTodo);

    // Mutation serveur (en arrière-plan)
    await saveTodoToServer(newTodo);
    // React revalide automatiquement après succès
  }

  return (
    <>
      <form action={createTodo}>
        <input name="title" />
        <button>Add</button>
      </form>

      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id} className={todo.pending ? 'pending' : ''}>
            {todo.title}
          </li>
        ))}
      </ul>
    </>
  );
}

Comportement :

1. User clique "Add" → Todo apparaît instantanément (grisé)
2. Requête serveur en arrière-plan
3. Si succès → Todo devient normal
4. Si échec → React rollback automatique

Avant React 19 :

• Nécessitait React Query / SWR / Redux
• 50+ lignes de code custom
• Gestion manuelle du rollback

Maintenant : 15 lignes avec useOptimistic

Autres Améliorations

Ref comme Prop

Plus besoin de forwardRef :

// React 18
const Input = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// React 19
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

Metadata Native

SEO intégré sans librairie :

function BlogPost({ post }) {
  return (
    <>
      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <meta property="og:title" content={post.title} />

      <article>
        <h1&gt;{post.title}</h1&gt;
        <p>{post.content}</p>
      </article>
    </>
  );
}

React 19 hoiste automatiquement dans le head HTML

Preloading Resources

import { preload, preinit } from 'react-dom';

function App() {
  // Précharger une image
  preload('/hero.jpg', { as: 'image' });

  // Précharger + exécuter un script
  preinit('/analytics.js', { as: 'script' });

  return <div>...</div>;
}

Breaking Changes

Suppressions

❌ Removed APIs :

• defaultProps (classes uniquement, fonctionne encore sur fonctions)
• propTypes (utiliser TypeScript à la place)
• Legacy Context (contextTypes)
• String refs (ref="myRef")

Migration :

// Avant
class Button extends React.Component {
  static defaultProps = { color: 'blue' };
  render() {
    return <button>{this.props.children}</button>;
  }
}

// Après
function Button({ color = 'blue', children }) {
  return <button>{children}</button>;
}

Suspense Changes

Suspense obligatoire pour use() :

// ❌ Erreur React 19
function App() {
  const data = use(fetchData()); // Throw sans Suspense parent
  return <div>{data}</div>;
}

// ✅ Correct
function App() {
  return (
    <Suspense fallback={<Loading />}>
      <DataComponent />
    </Suspense>
  );
}

function DataComponent() {
  const data = use(fetchData());
  return <div>{data}</div>;
}

Performance

Benchmarks Mesurés

React 18 vs React 19 :

Concurrent Rendering Amélioré

Interruptions plus intelligentes :

function Feed() {
  // React 19 priorise automatiquement les interactions utilisateur
  const posts = use(fetchPosts());

  return (
    <div>
      {posts.map(post => (
        <Post key={post.id} data={post} />
      ))}
    </div>
  );
}

React 19 interrompt le rendu si user clique/tape pendant le fetch

Migration

Codemod Automatique

npx codemod@latest react/19/migration-recipe

# Transforme automatiquement :
# - defaultProps → default params
# - forwardRef → ref prop
# - Legacy Context → new Context

Taux de succès : 94% (testé sur 1000+ repos)

Étapes Migration

1. Update dependencies ** :

npm install react@19 react-dom@19
npm install --save-dev @types/react@19  # TypeScript

2. Fix TypeScript types ** :

// Ajouter ref dans props
interface InputProps {
  ref?: React.Ref<HTMLInputElement>;
  value: string;
}

3. Remplacer librairies ** :

• ❌ React Query → ✅ use() + Actions
• ❌ Formik → ✅ useActionState
• ❌ Custom optimistic hooks → ✅ useOptimistic

Économie bundle size moyenne : 35 KB (librairies supprimées)

Adoption

Frameworks Support

Next.js 15 (stable) :

• Full React 19 support
• Server Actions améliorés
• Turbopack compatible

Remix 2.5 (beta) :

• Actions natives React 19
• Migration de Remix actions → React actions

Gatsby 6 (preview) :

• use() pour GraphQL queries
• SSR avec Suspense

Entreprises Early Adopters

Meta :

• Instagram : migré en 3 semaines
• -40% code forms
• +25% performance

Vercel :

• Vercel Dashboard migré
• Bundle size : -28%
• Developer happiness : +60%

Airbnb :

• En cours de migration
• use() remplace Apollo hooks progressivement

Roadmap

React 19.1 (Q1 2026) :

• Compiler React (auto-memoization)
• Offscreen rendering (background tabs)

React 20 (2026) :

• Resumable SSR (hydration partielle)
• Async Server Components améliorés

Articles connexes

Pour approfondir le sujet, consultez également ces articles :

• TypeScript 5.6 : Nullish Narrowing et Iterator Helpers Natifs
• Vercel v0 : Générateur d'UI IA Passe en GA avec Production-Ready Code
• Vue 4 Vapor Mode : Le Framework JavaScript Sans Virtual DOM en Octobre 2025

Conclusion

React 19 élimine la dépendance à React Query, Formik et autres state managers pour 80% des cas d'usage. Les Actions, use() et useOptimistic transforment le code React en le rendant plus simple, plus rapide et plus maintenable.

Devriez-vous migrer ?

• ✅ Nouveaux projets : Oui immédiatement
• ✅ Projets actifs : Oui dans les 3-6 mois
• ⚠️ Legacy apps : Attendre retours communauté

ROI migration :

• -30-40% lignes de code (forms/fetching)
• +20-30% performance
• -20-50% bundle size (supprimer libs)
• Migration : 2-5 jours (app moyenne)

React 19 = le plus gros game changer depuis les Hooks.