Un changement de donne pour les développeurs React ! / Blogs / Perficient

Réagir 19 a été officiellement publié en version stable le 5 décembre 2024. Cette mise à jour introduit des fonctionnalités étonnantes qui améliorent l’expérience des développeurs et les performances des applications. Dans ce blog, nous explorerons les fonctionnalités les plus marquantes de React 19 avec des exemples pour comprendre comment elles changent et la façon dont nous construisons des applications React.

Principales fonctionnalités de React 19

1. Composants du serveur

Les composants serveur améliorent les performances et le référencement en déplaçant le rendu des composants vers le serveur. Cela élimine le besoin de calculs lourds et de téléchargements de bibliothèques côté client, améliorant ainsi l’expérience utilisateur et réduisant la latence.

Exemple:

Imaginez une hiérarchie de composants :

<CourseWrapper>
  <CourseList />
  <Testimonials />
</CourseWrapper>

Supposons que les trois composants…CourseWrapper, CourseListet Testimonials– passent des appels réseau individuels. Traditionnellement, lorsque des requêtes API sont effectuées, chaque composant doit attendre sa réponse respective avant le rendu. Si CourseWrapper met plus de temps à recevoir ses données, CourseList et Testimonials ne peut pas rendre jusqu’à ce que CourseWrapper complète. Même si Testimonials récupère ses données plus rapidement, il doit encore attendre le composant le plus lent, ce qui entraîne un retard dans le rendu et entraîne une mauvaise expérience utilisateur avec des cascades de réseau visibles et une latence élevée.

Considérons maintenant le même scénario avec les composants serveur. La différence fondamentale réside dans la relocalisation des composants sur le serveur. Ici, la logique des composants et les données dont ils ont besoin sont colocalisées sur le serveur. Lorsqu’un client fait une demande, le serveur traite ces composants ensemble, récupère les données nécessaires et renvoie les composants entièrement rendus au client. Cela garantit que les trois composants :CourseWrapper, CourseListet Testimonials-sont rendus et livrés simultanément, minimisant ainsi la latence et améliorant l’expérience utilisateur.

Avec les composants serveur, l’interface utilisateur est effectivement « pré-préparée » sur le serveur, réduisant ainsi la surcharge du réseau et garantissant un rendu transparent côté client.

2. Actions du serveur

Les actions du serveur permettent d’exécuter des calculs et des tâches, comme la gestion des formulaires, sur le serveur. En annotant les fonctions avec "use server"React déplace ces tâches côté serveur pour de meilleures performances et sécurité. Comprenons cela avec un exemple.

Gestion des formulaires traditionnels

Dans une configuration traditionnelle, un formulaire pourrait ressembler à ceci :

<form onSubmit={performSearch}>
  <input type="text" name="searchTerm" />
  <button type="submit">Search</button>
</form>

function performSearch(event) {
  // Create form data from the current target event
  // Perform the search on the client side
}

Ici, performSearch est exécuté côté client. Il traite les valeurs d’entrée, effectue une recherche côté client ou effectue un appel API au serveur. Cette approche, bien que courante, conserve la logique et le traitement des données sur le client.

Actions du serveur dans React 19

Avec React 19, vous pouvez déplacer cette logique vers le serveur. En utilisant le action attribut sur le formulaire et en annotant la fonction correspondante avec le "use server" directive, vous pouvez exécuter ces calculs côté serveur. Voici comment cela fonctionne :

<form action={performSearch}>
  <input type="text" name="searchTerm" />
  <button type="submit">Search</button>
</form>

"use server";

const performSearch = async (formData) => {
  const term = formData.get("searchTerm");
  // Perform the search on the server side
};

Avantages clés

Le "use server" indique qu’il s’agit d’une fonction spéciale exécutée sur le serveur, la rendant idéale pour des tâches telles que : Envoi d’e-mails, Téléchargement de PDF, Effectuer des calculs complexes tels que la génération de factures. En gérant de telles opérations sur le serveur, vous réduisez le traitement côté client, améliorez la sécurité. et simplifiez les tâches complexes.

Remarques importantes

• "use server" est exclusivement destiné aux actions du serveur. Ne le confondez pas avec les composants serveur, qui gèrent le rendu sur le serveur.
• Les actions du serveur offrent une intégration transparente avec le formulaire action attribut, offrant un moyen propre et efficace de gérer la logique côté serveur.

3. Document méta

Lors du développement d’une application, il est courant d’inclure des métadonnées telles que le titre, la description, les images Open Graph et les cartes sociales de l’application (par exemple, pour X ou LinkedIn). La définition dynamique de ces métadonnées nécessitait souvent beaucoup de code passe-partout.

Approche traditionnelle

Auparavant, les métadonnées devaient être gérées manuellement à l’aide de useEffect ou des bibliothèques tierces comme react-helmet. Par exemple:

useEffect(() => {
  document.title = "Blog List";
  const metaDescriptionTag = document.querySelector('meta[name="description"]');
  if (metaDescriptionTag) {
    metaDescriptionTag.setAttribute('content', "Blog description");
  }
}, A Game-Changer for React Developers ! / Blogs / Perficient);

Cette approche implique une manipulation minutieuse, en particulier lors du rendu sur serveur d’une application React, pour garantir que les métadonnées sont appliquées correctement.

Prise en charge des métadonnées natives dans React 19

React 19 simplifie ce processus en introduisant la prise en charge native du rendu des métadonnées du document directement dans les composants. Balises de métadonnées comme <title>, <meta>et <link> peut désormais être inclus dans le JSX d’un composant et sera automatiquement hissé au <head> section du document lors du rendu.

Voici comment cela fonctionne :

const BlogListPage = () => {
  return (
    <>
      <title>Blog List</title>
      <meta name="description" content="Blog description" />
      <div>
        <h1>Products</h1>
        <ul>
          <li>Product 1</li>
          <li>Product 2</li>
          <li>Product 3</li>
        </ul>
      </div>
    </>
  );
};

Lorsque React rend le BlogListPage composant, il détecte automatiquement le <title>, <meta>et <link> balises et les déplace vers le <head> section du document.

Avantages

• Moins de passe-partout: élimine le besoin de logique personnalisée ou de bibliothèques externes pour gérer les métadonnées.
• Rendu de serveur transparent: garantit que les métadonnées sont correctement appliquées lors du rendu du serveur, améliorant ainsi le référencement et l’expérience utilisateur.
• Code plus propre: Incorpore les métadonnées directement dans le composant, rendant le code plus intuitif et plus facile à maintenir.

Avec React 19, la gestion des métadonnées des documents est devenue simple, permettant aux développeurs de se concentrer sur la création d’expériences utilisateur exceptionnelles sans s’enliser dans les complexités de configuration.

4. Crochets améliorés

En tant que développeurs React, nous connaissons déjà les hooks et la manière dont ils simplifient la gestion de l’état et du cycle de vie. Avec React 19, un nouvel ensemble d’API et de hooks a été introduit pour améliorer encore l’expérience de développement. Ceux-ci incluent :

• utiliser()
• utiliserFormStatus()
• utiliserActionState()
• utiliserOptimiste()

1. utiliser()

Le use() L’API vous permet de travailler avec des promesses. Quand tu fais une promesse à use()il résout la promesse et vous fournit le résultat. Vous pouvez utiliser use() pour lire conditionnellement les valeurs de contexte, par exemple après les premiers retours.

const theme = use(ThemeContext);

Cela fait use() un outil polyvalent pour gérer efficacement les données asynchrones ou les valeurs de contexte dynamiques.

2. utiliserFormStatus()

useFormStatus() lit le statut du parent <form> et fournit quatre états : pending, data, methodet action.

import { useFormStatus } from 'react-dom';

function DesignButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting…" : "Get Users"}
    </button>
  );
}

Avec useFormStatus()vous pouvez créer des éléments d’interface utilisateur plus réactifs et dynamiques, tels que des boutons qui affichent l’état de soumission sans nécessiter un chargeur d’interface utilisateur complet.

3. utilisezActionState()

useActionState() est un hook puissant pour gérer les validations et gérer les transitions d’état dans les actions. Il accepte une fonction « Action » et renvoie une action enveloppée. Lorsqu’on l’appelle, useActionState() fournit :

• Le dernier résultat de l’Action comme data
• L’état en attente de l’action comme pending

Cette composition facilite la gestion et le suivi du cycle de vie d’une action.

Pour une utilisation détaillée, reportez-vous à la documentation officielle de React sur useActionState.

4. utiliserOptimiste()

Le useOptimistic() hook simplifie la mise en œuvre de mises à jour optimistes de l’interface utilisateur. Les mises à jour optimistes permettent aux modifications d’apparaître immédiatement dans l’interface utilisateur, avant même la confirmation du serveur. Si la requête du serveur échoue, l’état peut revenir à sa valeur précédente.

const [optimisticState, setOptimisticState] = useOptimistic(initialState, reducer);

En utilisant useOptimistic()vous pouvez améliorer l’expérience utilisateur avec une interface plus réactive tout en gardant le contrôle sur la gestion des erreurs et la restauration de l’état. Ce hook rend les applications React plus robustes et plus conviviales.

Pour plus d’informations, consultez la documentation pour utiliserOptimiste.

5. ref comme accessoire

L’utilisation de ref dans React est une fonctionnalité essentielle pour accéder directement aux éléments du DOM, comme la focalisation d’un champ de saisie ou l’interaction avec des éléments spécifiques. Auparavant, passer un ref à travers une hiérarchie de composants nécessitait l’utilisation de React.forwardRef. Bien qu’efficace, cette approche a ajouté du passe-partout et de la complexité.

Avec React 19, travailler avec ref est devenu nettement plus rationalisé. Vous n’avez plus besoin forwardRef pour passer ref en composants. Au lieu de cela, vous pouvez le transmettre directement en tant qu’accessoire, simplifiant ainsi votre code.

Voici comment ref l’utilisation fonctionnait avant React 19 :

Dans React 19, vous pouvez directement transmettre le ref comme accessoire :

Ce changement réduit le besoin d’abstractions supplémentaires et rend la gestion ref plus intuitif, améliorant la productivité des développeurs et la lisibilité du code.

6. Chargement des actifs

Lors du rendu d’une vue dans React, vous remarquerez peut-être que les styles se chargent en premier, suivis des polices et des images. Ce chargement séquentiel peut provoquer un scintillement dans l’interface utilisateur, conduisant à une expérience utilisateur médiocre. React 19 vise à éliminer ce problème avec de nouvelles API de chargement de ressources telles que preload, preinit, prefetchDNSet preconnect. Ces API offrent un contrôle précis sur le chargement des actifs, garantissant que les ressources sont chargées efficacement et en arrière-plan, améliorant considérablement l’expérience utilisateur.

React 19 introduit ces API pour simplifier le processus de création d’applications transparentes et visuellement cohérentes. En tirant parti de ces fonctionnalités, vous pouvez éliminer le scintillement et garantir un chargement fluide des ressources dans votre application.

Voici comment utiliser ces API en pratique :

Ces API garantissent que les ressources sont chargées de manière proactive et efficace, réduisant ainsi le besoin d’optimisation manuelle. En les intégrant dans votre application React, vous pouvez offrir des performances exceptionnelles et une expérience utilisateur sans scintillement.

7. Rapport d’erreurs amélioré

React 19 introduit des améliorations significatives dans la gestion des erreurs, en traitant de la duplication et en fournissant des options plus robustes pour gérer les erreurs détectées et non détectées. Auparavant, lorsqu’une erreur se produisait lors du rendu et était détectée par une limite d’erreur, React :

1. Lancez l’erreur deux fois : une fois pour l’erreur d’origine et une autre fois après l’échec de la récupération automatique.
2. Enregistrez l’erreur avec console.errory compris des informations sur l’endroit où cela s’est produit.

Ce processus a abouti à trois rapports d’erreurs distincts pour une seule erreur détectée, provoquant une redondance et une confusion potentielle.

Avec React 19, ce comportement est rationalisé :

• Un seul journal d’erreurs consolide toutes les informations pertinentes sur les erreurs, simplifiant ainsi le débogage et le suivi des erreurs.

De plus, React introduit deux nouvelles options racine pour compléter l’existant onRecoverableError rappel. Ces options offrent un meilleur contrôle sur la façon dont les erreurs sont gérées :

• onCaughtError: Invoqué lorsque React détecte une erreur dans une limite d’erreur.
• onUncaughtError: Invoqué lorsqu’une erreur est générée et n’est pas détectée par une limite d’erreur.
• onRecoverableError: (option existante) Invoqué lorsqu’une erreur est générée mais automatiquement récupérée par React.

Ces améliorations garantissent une gestion plus efficace des erreurs, réduisent les journaux inutiles et donnent aux développeurs des outils précis pour gérer efficacement différents types d’erreurs. Que vous créiez des composants résistants aux erreurs ou amélioriez les processus de débogage, React 19 rend la gestion des erreurs plus intuitive et efficace.

Conclusion

React 19 est une avancée majeure pour les développeurs. Avec des fonctionnalités telles que les composants serveur, les actions serveur, les hooks améliorés et le chargement efficace des actifs, React 19 permet aux développeurs de créer des applications plus rapides, plus efficaces et hautement dynamiques. Si vous ne l’avez pas déjà fait, il est temps de mettre à niveau et de libérer tout le potentiel de React 19.