Les Nouveautés de React 19 : Ce Que Vous Devez Savoir. La communauté React attendait avec impatience l’arrivée de React 19, qui promet de transformer le développement d’applications avec de nouvelles fonctionnalités. Cette version met l’accent sur l’amélioration des performances, la gestion des états, et l’expérience développeur. Par conséquent, dans cet article, nous allons explorer les nouveautés majeures, y compris les nouveaux hooks et les améliorations de l’API.

1. Les Nouveaux Points de Référence (Ref)

L’une des premières améliorations que nous remarquons dans React 19 est l’optimisation des références. Désormais, les développeurs peuvent utiliser React.createRef() pour créer des références à des composants fonctionnels ou de classe. Cette fonctionnalité simplifie l’accès direct aux propriétés et méthodes des éléments du DOM.

Exemple de création d’une référence :

import React, { useRef, useEffect } from 'react';function FocusInput() {
const inputRef = useRef(null);useEffect(() => {
inputRef.current.focus(); // Focalise automatiquement l'input
}, []);return <input ref={inputRef} type="text" placeholder="Entrez du texte" />;
}export default FocusInput;

Dans cet exemple, l’input obtient le focus automatiquement lorsque le composant est monté. Grâce à cette gestion améliorée des références, les développeurs peuvent se concentrer sur la logique de leur application sans se soucier de la manipulation directe du DOM, ce qui favorise un code plus propre et plus maintenable.

2. Utilisation du Contexte (Context)

Un autre point fort de cette mise à jour concerne les améliorations apportées à l’API Context. En effet, React 19 facilite le partage des données entre les composants sans avoir à passer les props manuellement. Les nouveaux hooks associés au contexte offrent une gestion plus efficace des états globaux.

Exemple d’utilisation du contexte :

import React, { createContext } from 'react';// Création d'un contexte pour le thème
const ThemeContext = createContext('');function App({ children }) {
return (
// Utilisation de <ThemeContext> comme provider
<ThemeContext value="dark">
{children}
</ThemeContext>
);
}function ThemedComponent() {
return (
<ThemeContext.Consumer>
{theme => <div style={{ background: theme === 'dark' ? '#333' : '#FFF' }}>Ceci est un composant thématique.</div>}
</ThemeContext.Consumer>
);
}function Main() {
return (
<App>
<ThemedComponent />
</App>
);
}export default Main;

Dans cet exemple, le ThemeProvider permet de partager l’état du thème à travers l’application. Par conséquent, les composants peuvent accéder aux données de manière plus intuitive. Cette amélioration augmente également la lisibilité et la maintenabilité du code, tout en rendant le développement plus agréable.

3. Nouveau Hook useTransition

Un des ajouts les plus attendus de React 19 est le hook useTransition. En effet, ce hook permet aux développeurs de gérer les transitions d’interface utilisateur de manière plus fluide. Il offre une méthode pour marquer certaines mises à jour comme non urgentes, ce qui permet à React de prioriser les mises à jour critiques.

Exemple de useTransition :

import React, { useState, useTransition } from 'react';function App() {
const [isPending, startTransition] = useTransition();
const [inputValue, setInputValue] = useState('');const handleChange = (e) => {
const newValue = e.target.value;
startTransition(() => {
setInputValue(newValue); // Mettez à jour l'état de manière non urgente
});
};return (
<div>
<input type="text" onChange={handleChange} />
{isPending ? <span>Chargement...</span> : <div>Vous avez saisi : {inputValue}</div>}
</div>
);
}export default App;

Dans cet exemple, lorsque l’utilisateur tape dans l’input, setInputValue est appelé à l’intérieur d’une transition. En conséquence, cela permet à l’interface de rester réactive pendant le traitement. Ainsi, les utilisateurs bénéficient d’une expérience fluide, même lorsque des mises à jour complexes sont en cours.

4. Nouveau Hook useFormStatus

Une autre amélioration notoire est le nouveau hook useFormStatus. Ce dernier permet de gérer facilement l’état des formulaires, fournissant des informations sur le statut de soumission. Cela rend la gestion des formulaires plus intuitive, surtout lorsqu’il y a plusieurs formulaires sur la même page.

Exemple de useFormStatus :

import React from 'react';
import { useFormStatus } from 'react-dom';function DesignButton() {
const { pending } = useFormStatus(); // Accède à l'état du formulaire parentreturn <button type="submit" disabled={pending}>Soumettre</button>;
}function MyForm() {
const handleSubmit = async (e) => {
e.preventDefault();
// Logique de soumission du formulaire
console.log('Formulaire soumis');
};return (
<form action={handleSubmit}>
<DesignButton />
</form>
);
}export default MyForm;

Dans cet exemple, le composant DesignButton utilise le hook useFormStatus pour obtenir l’état de soumission du formulaire. Si le formulaire est en cours de soumission, le bouton sera désactivé, améliorant ainsi l’expérience utilisateur en évitant les soumissions multiples.

5. Nouveau Hook useOptimistic

Enfin, React 19 introduit le hook useOptimistic, qui permet de gérer les mises à jour optimistes dans les interfaces utilisateur. Grâce à cette fonctionnalité, les développeurs peuvent mettre à jour l’interface immédiatement, même avant que les données ne soient validées par le serveur. Cela donne une impression de rapidité et de réactivité.

Exemple de useOptimistic :

import React from 'react';
import { useOptimistic } from 'react-dom';async function updateName(newName) {
// Simule une requête de mise à jour de nom
return new Promise((resolve) => setTimeout(() => resolve(newName), 1000));
}function ChangeName({ currentName, onUpdateName }) {
const [optimisticName, setOptimisticName] = useOptimistic(currentName); // Utilisation du hook pour le nom optimisteconst submitAction = async (formData) => {
const newName = formData.get("name");
setOptimisticName(newName); // Met à jour le nom de manière optimiste
const updatedName = await updateName(newName);
onUpdateName(updatedName); // Appelle la fonction de mise à jour
};return (
<form action={submitAction}>
<p>Votre nom est : {optimisticName}</p>
<p>
<label>Changer de nom :</label>
<input
type="text"
name="name"
disabled={currentName !== optimisticName} // Désactive le champ si le nom n'est pas optimiste
/>
</p>
</form>
);
}export default ChangeName;

Dans cet exemple, le hook useOptimistic est utilisé pour gérer l’état optimiste du nom. Lorsqu’un utilisateur modifie le nom et soumet le formulaire, setOptimisticName est appelé pour mettre à jour l’affichage immédiatement. Pendant que la requête updateName est en cours, l’interface montre le nouveau nom. Une fois la mise à jour terminée, React basculera automatiquement vers la valeur actuelle du nom si nécessaire.

6. Nouveau Hook : useDeferredValue

React 19 introduit également un nouveau comportement pour le hook useDeferredValue, qui permet de gérer les mises à jour des valeurs de manière plus efficace. En ajoutant une option initialValue, ce hook améliore la gestion des valeurs lors du rendu initial des composants.

Exemple d’utilisation de useDeferredValue :

import { useDeferredValue } from 'react';function Search({ deferredValue }) {
// Au premier rendu, la valeur est ''.
// Ensuite, un re-rendu est planifié avec le deferredValue.
const value = useDeferredValue(deferredValue, '');return (
<Results query={value} />
);
}

Dans cet exemple, useDeferredValue permet de renvoyer la valeur initiale fournie lors du premier rendu. Par la suite, il programme un re-rendu en arrière-plan avec la valeur différée (deferredValue). Cela se révèle particulièrement utile pour les entrées utilisateur où la réactivité est essentielle, mais où les performances doivent être optimisées.

7. Support des Métadonnées du Document

Une autre nouveauté significative dans React 19 est le support natif pour le rendu des balises de métadonnées du document dans les composants. Dans le passé, ces balises, comme <title>, <link>, et <meta>, devaient être gérées manuellement, souvent avec des bibliothèques tierces comme react-helmet. Désormais, React facilite ce processus.

Exemple de rendu de métadonnées dans un composant :

function BlogPost({ post }) {
return (
<article>
<h1>{post.title}</h1>
<title>{post.title}</title>
<meta name="author" content="Josh" />
<link rel="author" href="https://twitter.com/joshcstory/" />
<meta name="keywords" content={post.keywords} />
<p>
Eee equals em-see-squared...
</p>
</article>
);
}

Lorsque React rend ce composant, il détecte les balises <title>, <link>, et <meta>, et les place automatiquement dans la section <head> du document. Ce changement garantit un fonctionnement fluide avec les applications client-only, le rendu côté serveur (SSR) en streaming, et les composants Serveur. Par conséquent, les développeurs n’ont plus besoin de se soucier des manipulations complexes des métadonnées.

8. Actions : Une Nouvelle Approche pour les Mutations de Données

Enfin, React 19 propose une nouvelle API appelée « Actions », qui simplifie le processus de mutation des données tout en gérant l’état des requêtes. Cela facilite la gestion des mises à jour de l’état après qu’une mutation de données a été effectuée. Dans le passé, les développeurs devaient gérer manuellement les états de chargement, les erreurs et les mises à jour optimistes.

Exemple avant l’utilisation des Actions :

import React, { useState } from 'react';function UpdateName() {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(false);const handleSubmit = async () => {
setIsPending(true);
const error = await updateName(name);
setIsPending(false);
if (error) {
setError(error);
return;
}
redirect("/path");
};return (
<div>
<input value={name} onChange={(event) => setName(event.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}

Dans cet exemple, la gestion des états de chargement (isPending), des erreurs (error), et des mutations de données nécessitait plusieurs appels d’état et une logique complexe. Grâce à la nouvelle API Actions de React 19, ce processus devient plus fluide et gérable.

9. Nouvelle API : use

Dans React 19, une nouvelle API est introduite pour lire des ressources directement lors du rendu : use. Cette API permet de gérer les promesses de manière plus fluide, en suspendant le rendu jusqu’à ce que la promesse soit résolue.

import { use } from 'react';function Comments({ commentsPromise }) {
// `use` suspendra jusqu'à ce que la promesse soit résolue.
const comments = use(commentsPromise);
return comments.map(comment => <p key={comment.id}>{comment}</p>);
}function Page({ commentsPromise }) {
// Lorsque `use` suspend dans Comments,
// cette frontière Suspense sera affichée.
return (
<Suspense fallback={<div>Loading...</div>}>
<Comments commentsPromise={commentsPromise} />
</Suspense>
);
}

Dans cet exemple, la fonction Comments utilise use pour lire commentsPromise. Si la promesse n’est pas résolue, React suspend le rendu et affiche le contenu de repli spécifié dans la balise Suspense. Cela simplifie considérablement le flux de données asynchrones dans les applications React.

10. React Server Components

Une autre nouveauté majeure dans React 19 est l’introduction des Server Components. Ces composants permettent de rendre des parties de l’application à l’avance, avant le bundling, dans un environnement distinct de l’application cliente ou du serveur SSR. Cet environnement séparé est désigné comme le « serveur » dans les Server Components. Ces composants peuvent s’exécuter une fois au moment de la construction sur votre serveur CI ou être exécutés pour chaque requête sur un serveur web.

React 19 intègre toutes les fonctionnalités des Server Components qui étaient précédemment disponibles dans le canal Canary. Cela signifie que les bibliothèques qui utilisent des Server Components peuvent maintenant cibler React 19 en tant que dépendance de pair, avec une condition d’exportation react-server pour une utilisation dans des frameworks prenant en charge l’architecture React Full-stack.

11. Support des Feuilles de Style

Les feuilles de style, qu’elles soient liées à l’extérieur (<link rel="stylesheet" href="...">) ou en ligne (<style>...</style>), nécessitent une gestion précise de leur position dans le DOM en raison des règles de priorité des styles. La création d’une capacité de feuille de style qui permet la composabilité au sein des composants est complexe. Ainsi, les utilisateurs finissent souvent par charger tous leurs styles loin des composants qui en dépendent, ou utilisent une bibliothèque de styles qui encapsule cette complexité.

Exemple d’utilisation des feuilles de style :

function ComponentOne() {
return (
<Suspense fallback="loading...">
<link rel="stylesheet" href="foo" precedence="default" />
<link rel="stylesheet" href="bar" precedence="high" />
<article className="foo-class bar-class">
{...}
</article>
</Suspense>
);
}function ComponentTwo() {
return (
<div>
<p>{...}</p>
<link rel="stylesheet" href="baz" precedence="default" />  {/* sera insérée entre foo et bar */}
</div>
);
}

Lors du rendu côté serveur, React inclura la feuille de style dans le <head>, ce qui garantit que le navigateur n’effectue pas de peinture tant qu’elle n’est pas chargée. De plus, si la feuille de style est découverte tardivement après le début du streaming, React veillera à l’insérer dans le <head> côté client avant de révéler le contenu d’une frontière Suspense qui dépend de cette feuille de style.

12. Support des Scripts Asynchrones

Enfin, React 19 introduit une meilleure prise en charge des scripts asynchrones. Les scripts normaux (<script src="...">) et les scripts différés (<script defer="" src="...">) se chargent dans l’ordre des documents, ce qui complique le rendu de ces types de scripts profondément dans votre arbre de composants. En revanche, les scripts asynchrones (<script async="" src="...">) peuvent se charger dans un ordre arbitraire.

Exemple d’utilisation des scripts asynchrones :

function MyComponent() {
return (
<div>
<script async={true} src="..." />
Hello World
</div>
);
}function App() {
return (
<html>
<body>
<MyComponent />
...
<MyComponent /> {/* ne créera pas de script en double dans le DOM */}
</body>
</html>
);
}

Dans tous les environnements de rendu, les scripts asynchrones seront dédupliqués, de sorte que React ne chargera et n’exécutera le script qu’une seule fois, même s’il est rendu par plusieurs composants différents.

Lors du rendu côté serveur, les scripts asynchrones seront inclus dans le <head> et priorisés derrière les ressources critiques qui bloquent la peinture, telles que les feuilles de style, les polices et les préchargements d’images.

13. Support for Preloading Resources

Lors du chargement initial du document et lors des mises à jour côté client, informer le navigateur des ressources qu’il est probable qu’il devra charger le plus tôt possible peut avoir un effet dramatique sur les performances de la page.

React 19 inclut plusieurs nouvelles API pour charger et précharger les ressources du navigateur afin de rendre la création d’expériences exceptionnelles aussi simple que possible, sans être freinée par un chargement inefficace des ressources.

function MyComponent() {
return (
<div>
<script async={true} src="..." />
Hello World
</div>
);
}function App() {
return (
<html>
<body>
<MyComponent />
...
<MyComponent /> {/* ne créera pas de script en double dans le DOM */}
</body>
</html>
);
}
<html>
<head>
<!-- liens/scripts sont prioritaires selon leur utilité pour le chargement précoce, pas selon l'ordre d'appel -->
<link rel="prefetch-dns" href="https://...">
<link rel="preconnect" href="https://...">
<link rel="preload" as="font" href="https://.../path/to/font.woff">
<link rel="preload" as="style" href="https://.../path/to/stylesheet.css">
<script async src="https://.../path/to/some/script.js"></script>
</head>
<body>
...
</body>
</html>

Ces API peuvent être utilisées pour optimiser les chargements initiaux des pages en déplaçant la découverte de ressources supplémentaires comme les polices en dehors du chargement des feuilles de style. Elles peuvent également rendre les mises à jour côté client plus rapides en préchargeant une liste de ressources utilisées par une navigation anticipée, puis en préchargeant ces ressources de manière anticipée lors d’un clic ou même d’un survol.

14. Conclusion et Perspectives d’Avenir

En résumé, React 19 apporte une multitude de nouvelles fonctionnalités et améliorations qui transforment notre manière de développer des applications. Grâce aux nouveaux hooks tels que useTransition, useFormStatus, et useOptimistic, les développeurs peuvent créer des interfaces utilisateur plus réactives et intuitives. En outre, les améliorations du contexte et des références renforcent la gestion des états globaux et le partage de données entre les composants.

Ainsi, ces nouvelles fonctionnalités permettent non seulement d’améliorer la performance des applications, mais elles optimisent également l’expérience développeur. Il est donc essentiel pour les développeurs de se familiariser avec ces nouveautés afin de tirer le meilleur parti de cette mise à jour. En définitive, l’avenir de React semble prometteur.

Pour approfondir vos connaissances en React et maîtriser ces nouvelles fonctionnalités, n’hésitez pas à rejoindre ma formation dédiée à React JS, où vous apprendrez à créer des applications performantes et réactives.

Newsletter

Vous souhaitez maîtriser les langages et outils du web ? Ne manquez aucune opportunité avec nos tutoriels, astuces et offres exclusives ! Inscrivez-vous dès maintenant pour recevoir des contenus de qualité, soigneusement sélectionnés pour vous, et boostez vos compétences. En vous inscrivant, vous recevrez une formation offerte ! 

Confirmez votre inscription via l'email qui vient de vous être envoyé. Vérifiez vos spams.