React 19 : Les nouveautés qui vont (ou pas) bouleverser votre quotidien de CTO
Ah, React. Ce framework qu'on adore... ou qu'on adore détester quand il décide de casser notre build à 3h du matin. Mais aujourd’hui, on parle de la nouvelle mouture : React 19 ! Au programme : des améliorations, des surprises, et bien sûr, un lot de discussions enflammées sur Twitter (pardon, X).
Voici ce qui est le plus important à savoir pour un CTO (selon moi).
L’opérateur use : Un raccourci qui fait rêver
Si vous aimez useState et useEffect, vous allez adorer use. Désormais, plus besoin de jouer à la devinette avec les promesses et les async/await. React vous permet d’appeler directement une ressource asynchrone dans un composant :
const data = use(fetch('/api/data'));Simple, rapide... et potentiellement dangereux si vous ne l’utilisez pas correctement. Mais bon, on aime vivre dangereusement, non ?
Les nouveaux hooks useFormStatus() et useActionState()
Ces deux petits nouveaux vont vous faciliter la gestion des formulaires et des actions asynchrones. useFormStatus() vous permet de savoir si un formulaire est en cours de soumission, tandis que useActionState() vous aide à gérer l'état d'une action de manière déclarative. Moins de useState partout, plus de simplicité !
Actions côté serveur : Le retour du serveur-side rendering
React 19 pousse encore plus loin l’intégration avec les backends. Maintenant, vous pouvez directement envoyer des requêtes serveur depuis le composant avec les « Server Actions ». Moins de boilerplate, plus de clarté. Mais aussi plus de risques de casser la prod avec une requête mal gérée.
'use server';
export async function submitForm(data) {
await db.insert(data);
}Alors oui, ça simplifie la vie, mais on sent déjà les discussions houleuses entre les équipes frontend et backend…
Le ref passe à la vitesse supérieure
Désormais, plus besoin d’utiliser forwardRef dans tous les sens. React 19 introduit une manière plus intuitive de gérer les références :
const myRef = useRef();
<input ref={myRef} />Ça ne change pas le monde, mais ça évite quelques nœuds au cerveau.
Suspense change (et ça fait débat)
Suspense, le mécanisme pour gérer les chargements asynchrones, se comporte différemment. Avant, toutes les requêtes dans un même Suspense se faisaient en parallèle. Maintenant, elles peuvent être exécutées séquentiellement. Résultat ? Des temps de chargement plus longs si vous ne faites pas attention. Autant dire que ce changement a fait grincer quelques dents.
Le useOptimistic() : Optimisme et UI réactive
Avec useOptimistic(), React 19 vous permet d’anticiper les changements d’état de votre UI sans attendre la réponse serveur. Idéal pour offrir une expérience utilisateur plus fluide.
const [optimisticLikes, addOptimisticLike] = useOptimistic(likes, (likes) => likes + 1);Bye bye les délais d’attente agaçants, bonjour la réactivité !
Un compilateur expérimental (attention, fragile)
Le tout nouveau compilateur de React détecte désormais notre code et l'optimise tout seul de manière intelligente. Ceci permet d'avoir des performances décuplées pour l'expérience utilisateur ainsi qu’une meilleure optimisation pour les moteurs de recherche. Un vrai game-changer… en théorie !
Support natif des balises <meta>
Enfin ! React 19 apporte un support amélioré pour les balises <meta>, ce qui simplifie grandement la gestion du SEO dans vos applications. Plus besoin de bricoler, tout est géré proprement.
Bon et c'est pas tout mais c'est déjà pas mal...