React 19 : Nouvelles Features et Guide Migration 2026

React 19 sort en décembre 2024. En 2026, c'est désormais le standard.

Ce guide explore les 7 features majeures de React 19 : Server Actions, use() hook, React Compiler, transitions, ref as prop, et plus. Avec migration guide depuis React 18.

Adoption 2026 : 68% des projets React (vs 28% en 2025)

TL;DR : Quoi de Neuf dans React 19 ?

Feature	Description	Impact
Server Actions	Mutations serveur sans API route	🟢 Révolutionnaire
use() Hook	Async data en composants	🟢 Game-changer
React Compiler	Auto-memoization (bye useMemo)	🟢 Performance +40%
Actions	Form handling simplifié	🟡 Utile
ref as Prop	Plus besoin forwardRef	🟡 DX improvement
Context as Provider	<Context> vs <Context.Provider>	🟡 Simplification
Document Metadata	<title>, <meta> en composants	🟡 SEO facile

Breaking Changes :

• ⚠️ React 18 patterns deprecated (certains)
• ⚠️ IE11 support dropped (OK en 2026)
• ⚠️ Strict Mode plus strict

1. Server Actions : La Révolution Forms & Mutations

Concept

"Server-side mutations directement depuis composants client. Plus besoin API routes."

Avant React 19 :

// ❌ Client component → API route → Database
async function handleSubmit(e) {
  e.preventDefault()

  const res = await fetch('/api/create-post', {
    method: 'POST',
    body: JSON.stringify(formData),
  })

  if (res.ok) {
    router.refresh()
  }
}

Avec React 19 (Server Actions) :

// ✅ Client component → Server Action direct
'use server'

async function createPost(formData: FormData) {
  'use server'

  const title = formData.get('title') as string
  const content = formData.get('content') as string

  // ✅ Database mutation côté serveur
  await db.insert(posts).values({ title, content })

  // ✅ Revalidate cache
  revalidatePath('/blog')
}

// Client component
export default function CreatePostForm() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="content" required />
      <button type="submit">Publish</button>
    </form>
  )
}

Avantages :

• ✅ Moins de code : Pas d'API route séparée
• ✅ Type-safe : TypeScript end-to-end
• ✅ Security : Server-only code (database access)
• ✅ Progressive Enhancement : Fonctionne sans JS

Server Actions Avancées

Pattern 1 : Form avec Validation

// app/actions.ts
'use server'

import { z } from 'zod'
import { revalidatePath } from 'next/cache'

const postSchema = z.object({
  title: z.string().min(3).max(100),
  content: z.string().min(10),
  published: z.boolean().default(false),
})

export async function createPost(prevState: any, formData: FormData) {
  // ✅ Validation Zod
  const validatedFields = postSchema.safeParse({
    title: formData.get('title'),
    content: formData.get('content'),
    published: formData.get('published') === 'on',
  })

  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
    }
  }

  // ✅ Database mutation
  await db.insert(posts).values(validatedFields.data)

  // ✅ Revalidate cache
  revalidatePath('/blog')

  return { success: true }
}

// app/create-post/page.tsx
'use client'

import { useFormState, useFormStatus } from 'react-dom'
import { createPost } from '@/app/actions'

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Creating...' : 'Create Post'}
    </button>
  )
}

export default function CreatePostPage() {
  const [state, formAction] = useFormState(createPost, null)

  return (
    <form action={formAction}>
      <input name="title" />
      {state?.errors?.title && <p className="error">{state.errors.title}</p>}

      <textarea name="content" />
      {state?.errors?.content && <p className="error">{state.errors.content}</p>}

      <label>
        <input type="checkbox" name="published" />
        Publish
      </label>

      <SubmitButton />
    </form>
  )
}

Pattern 2 : Optimistic Updates

// app/todos/page.tsx
'use client'

import { useOptimistic } from 'react'
import { toggleTodo } from '@/app/actions'

export default function TodoList({ todos }: { todos: Todo[] }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo: Todo) => [...state, newTodo]
  )

  async function handleToggle(id: string) {
    // ✅ Update UI immédiatement (optimistic)
    addOptimisticTodo({ id, completed: true })

    // ✅ Server mutation
    await toggleTodo(id)
  }

  return (
    <ul>
      {optimisticTodos.map((todo) => (
        <li key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => handleToggle(todo.id)}
          />
          {todo.title}
        </li>
      ))}
    </ul>
  )
}

2. use() Hook : Async Data Simplified

Concept

"Nouveau hook pour résoudre Promises/Context anywhere dans component tree."

Avant React 19 :

// ❌ useEffect + useState boilerplate
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => {
        setUser(data)
        setLoading(false)
      })
  }, [userId])

  if (loading) return <div>Loading...</div>

  return <div>{user.name}</div>
}

Avec React 19 (use() Hook) :

// ✅ use() hook avec Suspense
import { use, Suspense } from 'react'

async function fetchUser(id: string) {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
}

function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  // ✅ use() résout la Promise
  const user = use(userPromise)

  return <div>{user.name}</div>
}

export default function UserPage({ userId }: { userId: string }) {
  const userPromise = fetchUser(userId)

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  )
}

Avantages :

• ✅ Moins de code : Pas de useState/useEffect
• ✅ Suspense natif : Loading states automatiques
• ✅ Error boundaries : Gestion erreurs élégante
• ✅ Conditions support : Peut être appelé dans if/loop

use() avec Conditional

// ✅ use() dans condition (impossible avec hooks classiques)
function UserProfile({ userId }: { userId: string | null }) {
  let user = null

  if (userId) {
    // ✅ Appel conditionnel (breaking hooks rules OK!)
    const userPromise = fetchUser(userId)
    user = use(userPromise)
  }

  return user ? <div>{user.name}</div> : <div>No user</div>
}

3. React Compiler : Auto-Optimization

Concept

"Compiler React automatise useMemo, useCallback et React.memo. Plus besoin!"

React 18 (Manual) :

// ❌ useMemo/useCallback manual partout
function TodoList({ todos, filter }: Props) {
  const filteredTodos = useMemo(() => todos.filter((t) => t.status === filter), [todos, filter])

  const handleToggle = useCallback((id: string) => {
    // ...
  }, [])

  return (
    <ul>
      {filteredTodos.map((todo) => (
        <MemoizedTodoItem key={todo.id} todo={todo} onToggle={handleToggle} />
      ))}
    </ul>
  )
}

const MemoizedTodoItem = React.memo(TodoItem)

React 19 (Compiler Auto) :

// ✅ Compiler auto-optimize (pas useMemo/useCallback needed)
function TodoList({ todos, filter }: Props) {
  // ✅ Compiler détecte automatiquement pure computation
  const filteredTodos = todos.filter((t) => t.status === filter)

  // ✅ Compiler détecte function stable
  const handleToggle = (id: string) => {
    // ...
  }

  return (
    <ul>
      {filteredTodos.map((todo) => (
        // ✅ Pas React.memo needed
        <TodoItem key={todo.id} todo={todo} onToggle={handleToggle} />
      ))}
    </ul>
  )
}

Gains Performance :

• ✅ -40% re-renders inutiles (auto-memoization)
• ✅ 100% code removal : useMemo/useCallback partout
• ✅ Bundle size : -15% (moins runtime hooks)

Activer React Compiler (Next.js 15)

// next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: true, // ✅ Enable React Compiler
  },
}

export default nextConfig

Compatibilité :

• ✅ Next.js 15+
• ✅ Vite 5+
• ✅ Create React App (via craco)

4. Actions : Form Handling Native

useActionState Hook

// app/actions.ts
'use server'

export async function updateProfile(prevState: any, formData: FormData) {
  const name = formData.get('name') as string

  if (!name || name.length < 2) {
    return { error: 'Name too short' }
  }

  await db.update(users).set({ name }).where(eq(users.id, userId))

  return { success: true }
}

// app/profile/page.tsx
;('use client')

import { useActionState } from 'react'

export default function ProfilePage() {
  const [state, formAction, isPending] = useActionState(updateProfile, null)

  return (
    <form action={formAction}>
      <input name="name" />
      {state?.error && <p className="error">{state.error}</p>}
      {state?.success && <p className="success">Updated!</p>}

      <button disabled={isPending}>{isPending ? 'Saving...' : 'Save'}</button>
    </form>
  )
}

5. Ref as Prop : Bye forwardRef

React 18 :

// ❌ forwardRef boilerplate
import { forwardRef } from 'react'

const Input = forwardRef<HTMLInputElement, Props>(({ value, onChange }, ref) => {
  return <input ref={ref} value={value} onChange={onChange} />
})

React 19 :

// ✅ ref as prop direct
function Input({ value, onChange, ref }: Props & { ref: Ref<HTMLInputElement> }) {
  return <input ref={ref} value={value} onChange={onChange} />
}

// Usage
;<Input ref={inputRef} />

6. Document Metadata en Composants

React 18 (react-helmet) :

// ❌ react-helmet third-party
import { Helmet } from 'react-helmet'

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

React 19 (natif) :

// ✅ <title>, <meta> natif React 19
function BlogPost({ post }: { post: Post }) {
  return (
    <>
      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <meta property="og:title" content={post.title} />

      <article>{post.content}</article>
    </>
  )
}

Note : Next.js Metadata API reste supérieur (type-safe)

Migration React 18 → React 19

Étape 1 : Update Packages

# Update React
pnpm add react@19 react-dom@19

# Update Next.js (si applicable)
pnpm add next@15

# Update types
pnpm add -D @types/react@19 @types/react-dom@19

Étape 2 : Breaking Changes à Fixer

1. Suppression Prop Types

// ❌ React 18 : PropTypes deprecated
import PropTypes from 'prop-types'

function Button({ children }) {
  return <button>{children}</button>
}

Button.propTypes = {
  children: PropTypes.node.isRequired,
}

// ✅ React 19 : TypeScript only
function Button({ children }: { children: React.ReactNode }) {
  return <button>{children}</button>
}

2. Context Simplification

// ❌ React 18
<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

// ✅ React 19 (les deux fonctionnent)
<ThemeContext value="dark">
  <App />
</ThemeContext>

3. Ref Cleanup

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

// ✅ React 19
function Input({ ref, ...props }: Props & { ref: Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />
}

Étape 3 : Opt-in Features

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx", // ✅ New JSX transform
    "lib": ["ES2023", "DOM"],
    "target": "ES2022"
  }
}

// next.config.ts (si Next.js)
const nextConfig = {
  experimental: {
    reactCompiler: true, // ✅ Enable React Compiler
  },
}

Checklist Migration

✅ Compatible (Aucun changement)

• Components fonctionnels
• Hooks (useState, useEffect, etc.)
• CSS Modules / Tailwind
• Event handlers
• Context API

⚠️ Deprecated (À Migrer)

• PropTypes → TypeScript
• React.FC → function signature
• Class components → Fonction (long terme)
• forwardRef → ref as prop

🚀 Nouvelles Features (Opt-in)

• Server Actions (Next.js)
• use() hook pour async data
• React Compiler (experimental)
• Document metadata (