React 19 : Les nouveautes qui changent tout

Introduction

React 19 apporte son lot de nouveautes qui vont revolutionner notre facon de developper des applications web. Dans cet article, nous allons explorer les principales fonctionnalites et comment les utiliser dans vos projets.

Les Server Components par defaut

L'une des plus grandes nouveautes est l'integration native des Server Components. Ils permettent de reduire considerablement la taille du bundle JavaScript envoye au client.

Avantages des Server Components

• Reduction de la taille du bundle jusqu'a 40%
• Meilleure performance initiale (LCP ameliore)
• Acces direct aux ressources serveur (base de donnees, fichiers)
• Pas besoin d'API intermediaire pour les lectures

Exemple pratique

Voici comment creer un Server Component qui charge des donnees directement :

async function BlogPosts() {
  const posts = await db.post.findMany({
    orderBy: { createdAt: 'desc' },
    take: 10,
  })

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.excerpt}</p>
        </li>
      ))}
    </ul>
  )
}

Note importante : Les Server Components ne peuvent pas utiliser de hooks React comme useState ou useEffect. Pour l'interactivite, utilisez des Client Components avec la directive 'use client'.

Les Actions

Les Actions simplifient la gestion des formulaires et des mutations de donnees. Fini les useState et useEffect complexes pour gerer les soumissions de formulaires.

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

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

  await db.post.create({
    data: { title, content },
  })

  revalidatePath('/blog')
}

export function CreatePostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Titre" required />
      <textarea name="content" placeholder="Contenu" required />
      <button type="submit">Publier</button>
    </form>
  )
}

Le hook useOptimistic

React 19 introduit useOptimistic pour gerer les mises a jour optimistes de l'interface :

function LikeButton({ initialLikes }: { initialLikes: number }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    initialLikes,
    (current) => current + 1
  )

  return (
    <button onClick={() => addOptimisticLike(null)}>
      {optimisticLikes} likes
    </button>
  )
}

Conclusion

React 19 marque une evolution majeure dans l'ecosysteme React. Ces nouvelles fonctionnalites vont permettre de creer des applications plus performantes et plus faciles a maintenir. La combinaison Server Components + Actions + useOptimistic offre un modele de developpement beaucoup plus simple et intuitif.