Accueil / Articles / L’avenir de React : quels patterns survivront jusqu’en 2030

L’avenir de React : quels patterns survivront jusqu’en 2030

Découvrez quels fonctionnalités de React, comme les composants serveur et le compilateur, restent permanentes, et quels patterns, tels que Redux et CSS-in-JS, disparaissent progressivement.

784 mots

React a été déclaré mort plus souvent que quiconque ne peut le compter, mais cela ne s’est jamais vraiment produit. Néanmoins, la version de React que vous écrirez en 2030 sera très différente de celle que vous utilisez aujourd’hui. Les éléments qui resteront en place dans cinq ou dix ans sont ceux qui ont déjà prouvé qu’ils résolvaient un vrai problème, et non ceux qui n’étaient populaires que temporairement.

Ce qui est déjà fixé

React n’a pas atteint sa forme actuelle par hasard. Les actions, l’API use permettant de lire des promesses et des valeurs de contexte pendant le rendu, le traitement de ref comme une propriété ordinaire, ainsi que les composants serveur stables sont tous désormais fondamentaux — aucun d’eux ne sera retiré dans une future version.

  • Les composants serveur ne sont plus expérimentaux — ils constituent désormais la norme. Les composants serveur React vous permettent de rendre l’interface utilisateur entièrement sur le serveur, ce qui signifie moins de JavaScript envoyé au navigateur, et la plupart des frameworks activent cette fonctionnalité par défaut.
  • Le compilateur est passé d’un projet de recherche à un outil de production. Avec sa version 1.0, l’idée d’écrire du code simple et ordinaire en laissant le compilateur s’occuper de la mémorisation et des optimisations est désormais quelque chose que les équipes mettent réellement en œuvre, et non plus seulement un concept théorique.
  • La gouvernance est plus stable que jamais. React relève désormais de la React Foundation indépendante, hébergée par la Linux Foundation, ce qui montre que l’avenir du projet ne dépend plus d’une seule décision prise au sein de Meta.
// app/products/page.tsx — Server Component, no client bundle cost
import { getProducts } from "@/lib/db";

export default async function ProductsPage() {
  const products = await getProducts(); // runs on the server, not the browser
  return (
    <section>
      <h1>Our Products</h1>
      <ul>
        {products.map((p) => (
          <li key={p.id}>{p.name} — ${p.price}</li>
        ))}
      </ul>
    </section>
  );
}

Ce qui disparaît progressivement

  • Redux en tant que conteneur d’état par défaut. Lorsque les composants serveurs gèrent la récupération des données, que les actions serveur s’occupent des mutations et que l’URL gère le filtrage et la pagination, il ne reste presque plus rien qui justifie l’existence d’un stockage global du côté client.
  • Solutions CSS-in-JS. Des bibliothèques comme Emotion et styled-components sont désormais en mode maintenance, car elles ne s’intègrent pas bien au modèle de rendu serveur sur lequel reposent les composants serveurs.
  • Bibliothèques de composants personnalisées construites à partir de zéro. Le modèle popularisé par shadcn/ui en combinaison avec Radix — où l’on copie directement le code des composants dans son propre répertoire au lieu d’installer un paquet opaque — est devenu le point de départ privilégié par la plupart des équipes de développement.
// Lightweight client state — this is basically all Redux gets used for now
import { create } from "zustand";

const useCartDrawer = create<{ open: boolean; toggle: () => void }>((set) => ({
  open: false,
  toggle: () => set((s) => ({ open: !s.open })),
}));

Quelles en seront les conséquences pour 2030

  • Adoptez immédiatement une approche centrée sur le serveur. Récupérer des données à l’intérieur d’un composant qui n’est jamais envoyé au client ne sera plus considéré comme une technique de pointe — ce sera simplement l’attente de base.
  • Cessez de recourir par habitude à l’état global. Avant d’implémenter un store, demandez-vous si ces données devraient réellement se trouver sur le serveur, dans l’URL ou plutôt à l’intérieur d’un formulaire.
  • Tailwind ne disparaît pas — il devient la norme. Grâce à son moteur basé sur Rust et au fait qu’il n’exige pas de pipeline PostCSS supplémentaire, Tailwind s’est imposé comme la couche de stylisation par défaut pour la plupart des nouveaux projets React.
  • TypeScript n’est plus une option. Toute équipe qui développe quelque chose de sérieux l’adopte désormais comme standard, et non comme une étape supplémentaire.

Il convient également de souligner qu’il n’y a pas de React 20 à l’horizon. L’écosystème atteint une maturité plutôt que de se précipiter vers le prochain grand numéro de version, ce qui est sans doute un signe de santé plutôt que de stagnation.

Conclusion

React en 2030 ne sera pas un framework différent — ce seront les mêmes idées de base, sans les éléments supplémentaires dont nous avions besoin uniquement parce que la technologie de rendu serveur n’était pas encore finalisée. Le chargement des données en priorité côté serveur, une dépendance minimale à l’état du client, ainsi qu’un compilateur qui effectue silencieusement les optimisations que l’on faisait autrefois à la main ne sont pas des tendances spéculatives ; ce sont des habitudes qu’il vaut la peine de développer dès maintenant. Le React qui sera encore en usage dans cinq ans sera celui qui ressemble déjà à cela aujourd’hui, avec simplement les aspérités lissées.

Lectures complémentaires