Fermer

décembre 6, 2024

Quoi de neuf dans React 19

Quoi de neuf dans React 19


React 19 est un grand pas en avant pour l’écosystème React, doté de nouvelles fonctionnalités et améliorations pour rendre l’expérience de développement meilleure et nos applications plus puissantes. Jetons un coup d’œil aux nouveaux hooks et API, aux composants React Server et plus encore.

React 19, qui est allé stable le 5 décembre 2024fait ses débuts deux ans après la sortie de React 18, marquant une étape importante dans son évolution. Cette nouvelle version est remplie de nombreuses mises à jour, telles que de nouveaux hooks et API, des composants React Server, la suppression de certaines API React obsolètes et bien plus encore. Dans l’article d’aujourd’hui, nous discuterons de certaines de ces nouvelles fonctionnalités et de la manière dont elles peuvent améliorer votre expérience de développement React.

React v19 est officiel ! Essayez les dernières nouveautés de React avec KendoRéagir Prise en charge Day-Zero pour React 19. Mettez simplement à jour vers la dernière version.

Nouveaux hooks et API

React 19 introduit une variété de nouveaux hooks et API conçus pour rationaliser et améliorer le processus de développement. Ces ajouts fournissent des outils plus puissants et flexibles pour gérer l’état, gérer les opérations asynchrones et optimiser les performances de nos applications React. Examinons quelques-uns de ces nouveaux Hooks et API.

Actions de formulaire et hook useActionState

Un aspect important de l’utilisation des applications Web aujourd’hui est l’interaction avec des formulaires à des fins très diverses, telles que l’authentification des utilisateurs, la soumission de données, les transactions de commerce électronique, la collecte de commentaires, les requêtes de recherche, etc. Par conséquent, une tâche courante dans le développement de composants React consiste à gérer les soumissions de formulaires et à gérer les mises à jour asynchrones qui suivent ces soumissions.

Un exemple simple de composant de formulaire gérant de telles mises à jour asynchrones peut ressembler à ceci :

import React, { useState, useCallback } from "react";

const submitForm = async () => {
  
};

export function Component() {
  
  const [formState, setFormState] = useState(null);
  const [isPending, setIsPending] = useState(false);

  
  const formAction = useCallback(async (event) => {
    event.preventDefault();
    setIsPending(true);
    try {
      const result = await submitForm();
      setFormState(result);
    } catch (error) {
      setFormState({ message: "Failed to complete action" });
    }
    setIsPending(false);
  }, []);

  
  return <form onSubmit={formAction}>{}</form>;
}

Dans l’exemple ci-dessus, le composant gère l’état du formulaire et traite les soumissions de formulaire de manière asynchrone. Lorsque le formulaire est soumis, le submitForm() La fonction envoie les données du formulaire à un serveur et reçoit une réponse. Le composant met ensuite à jour son état pour fournir des commentaires à l’utilisateur sur le processus de soumission.

Dans React 18, le concept de transition de l’interface utilisateur d’une vue à une autre de manière non urgente était appelé transitions. React 19 étend cette fonctionnalité en prenant en charge l’utilisation de fonctions asynchrones dans les transitions. Le useTransition hook peut désormais être utilisé pour gérer l’affichage des indicateurs de chargement ou des espaces réservés lors de la récupération de données asynchrone.

Dans React 19, le concept de transitions va encore plus loin puisque les fonctions qui utilisent asynchrone les transitions sont désormais appelées Actes. Il existe maintenant quelques hooks spécialisés pour gérer les actions comme ce que nous avons vu ci-dessus et le premier que nous examinerons est le utiliserActionState crochet.

Le useActionState() hook prend trois paramètres :

  1. Une fonction « action », qui est appelée lorsque l’action du formulaire est déclenchée.
  2. Un objet d’état initial, définissant l’état de départ du formulaire avant toute interaction de l’utilisateur.
  3. [Optional] Un permalien qui pointe vers l’URL unique de la page modifiée par ce formulaire.

Il renvoie trois valeurs dans un tuple :

  1. L’état actuel du formulaire.
  2. Une fonction pour déclencher l’action du formulaire.
  3. Un booléen indiquant si l’action est en attente.
import { useActionState } from "react";

export function Component() {
  const [state, dispatch, isPending] = useActionState(
    action,
    initialState,
    permalink
  );

  
}

La fonction d’action, qui est le premier argument passé au useActionState hook, est invoqué lorsque le formulaire est soumis. Il renvoie l’état du formulaire vers lequel nous prévoyons de passer, que la soumission réussisse ou rencontre des erreurs. Cette fonction reçoit deux paramètres : l’état actuel du formulaire et les données du formulaire au moment où l’action a été déclenchée.

Voici un exemple de création d’un action() fonction qui appelle un hypothétique submitForm() fonction, qui déclenche ensuite un appel API pour envoyer les données du formulaire à un serveur. Si l’action réussit, elle renvoie un objet d’état de formulaire représentant l’état mis à jour du formulaire. Si l’action échoue, elle renvoie un objet d’état de formulaire reflétant l’état d’erreur, incluant potentiellement des messages d’erreur ou des indicateurs pour aider l’utilisateur à corriger le problème.

import { useActionState } from "react";

const submitForm = async (formData) => {
  
};

const action = async (currentState, formData) => {
  try {
    const result = await submitForm(formData);
    return { message: result };
  } catch {
    return { message: "Failed to complete action" };
  }
};

export function Component() {
  const [state, dispatch, isPending] = useActionState(action, null);

  
}

Avec notre useActionState() hook configuré, nous pouvons maintenant utiliser l’état du formulaire, dispatch() fonction et isPending valeurs dans notre modèle de formulaire.

Avec React 19, <form> les éléments ont maintenant un action prop qui peut recevoir une fonction d’action qui sera déclenchée lorsqu’un formulaire est soumis. C’est ici que nous transmettrons le dispatch fonction de notre useActionState() crochet.

import { useActionState } from "react";

const submitForm = async (formData) => {
  
};

const action = async (currentState, formData) => {
  try {
    const result = await submitForm(formData);
    return { message: result };
  } catch {
    return { message: "Failed to complete action" };
  }
};

export function Component() {
  const [state, dispatch, isPending] = useActionState(action, null);

  return <form action={dispatch}>{}</form>;
}

Nous pouvons montrer le formulaire state dans notre modèle et utilisez le isPending valeur pour indiquer à l’utilisateur quand l’action asynchrone est en cours.

import { useActionState } from "react";

const submitForm = async (formData) => {
  
};

const action = async (currentState, formData) => {
  try {
    const result = await submitForm(formData);
    return { message: result };
  } catch {
    return { message: "Failed to complete action" };
  }
};

export function Component() {
  const [state, dispatch, isPending] = useActionState(action, null);

  return (
    <form action={dispatch}>
      <input type="text" name="text" disabled={isPending} />

      <button type="submit" disabled={isPending}>
        Add Todo
      </button>

      {}
      {state.message && <h4>{state.message}</h4>}
    </form>
  );
}

Grâce à ces nouveaux changements dans React, il n’est plus nécessaire de gérer manuellement les états en attente, les erreurs et les requêtes séquentielles lorsque vous travaillez avec des transitions asynchrones dans les formulaires. Au lieu de cela, nous pouvons accéder à ces valeurs directement via le useActionState() crochet.

Pour un exemple plus détaillé qui interagit avec le fichier accessible au public mannequinjson API, regarde ça L’essentiel de GitHub.

utiliserFormStatus

React 19 introduit un nouveau hook appelé utiliserFormStatusqui permet aux composants enfants imbriqués d’accéder aux informations sur le formulaire dont ils font partie, de la même manière qu’un formulaire agirait en tant que fournisseur de contexte.

import { useFormStatus } from "react";

export function NestedComponent() {
  
  const { pending, data, method, action } = useFormStatus();

  return (
    
  );
}

Bien que l’accès aux informations du formulaire parent puisse être réalisé en utilisant ContexteReact 19 introduit le useFormStatus hook pour simplifier la gestion des données de formulaire dans les composants imbriqués.

utiliserOptimiste

Une autre nouveauté de React 19 est le utiliserOptimiste crochet. Il permet des mises à jour optimistes pendant qu’une opération en arrière-plan, telle qu’une requête réseau, est en cours. Cela améliore l’expérience utilisateur en fournissant des commentaires plus rapides sur les interactions.

Voici un exemple de la façon dont le useOptimistic() le hook peut être utilisé pour gérer les mises à jour optimistes pour un message propriété de l’État passée comme accessoire.

import { useOptimistic } from "react";

export function Component({ message, updateMessage }) {
  
  const [optimisticMessage, setOptimisticMessage] = useOptimistic(message);

  const submitForm = async (formData) => {
    const newMessage = formData.get("text");

    
    setOptimisticMessage(newMessage);

    
    const updatedName = await submitToAPI(newMessage);
    updateMessage(updatedName);
  };

  return (
    <form action={submitForm}>
      {}
      <p>{optimisticMessage}</p>

      <input type="text" name="text" />
      <button type="submit">Add Message</button>
    </form>
  );
}

Dans l’exemple de composant ci-dessus, le useOptimistic hook gère les mises à jour optimistes pour le message État transmis comme accessoire.

Lorsque l’utilisateur soumet le formulaire en cliquant sur le bouton « Ajouter un message », le submitForm() la fonction est déclenchée. Avant de faire la requête API pour mettre à jour le message, le setOptimisticMessage() la fonction est appelée avec la nouvelle valeur du message à partir des données du formulaire. Cela met instantanément à jour l’interface utilisateur pour refléter le changement optimiste, fournissant ainsi un retour immédiat à l’utilisateur.

Une fois la mise à jour terminée ou échouée, React reviendra automatiquement à l’état initial. message valeur de l’accessoire.

L’API Nouvelle Utilisation

React 19 introduit un nouveau utiliser API, fournissant une méthode flexible pour lire les valeurs de ressources telles que les promesses ou le contexte. Par exemple, pour accéder aux valeurs de contexte, nous transmettons le contexte à use()et il parcourt l’arborescence des composants pour trouver le fournisseur de contexte le plus proche.

import { use, createContext } from "react";

const Context = createContext({ data: "Data from context" });


function NestedChildComponent() {
  const context = use(Context);
  
}

Contrairement au useContext() hook, qui est traditionnellement utilisé pour lire le contexte, le use() La fonction peut être utilisée dans les conditions et les boucles de nos composants !

import { use, createContext } from "react";

const Context = createContext({ data: "Data from context" });


function NestedChildComponent({ value }) {
  if (value) {
    const context = use(Context);
  }

  
}

Le use() la fonction s’intègre également parfaitement avec Attente et les limites d’erreur pour lire les promesses (pour plus de détails, voir le « Streaming de données du serveur vers le client» de la documentation React).

Composants du serveur React

Composants du serveur Reactune nouvelle fonctionnalité de React 19, permet la création de composants React sans état qui exécuter sur le serveur. Ces composants s’exécutent à l’avance et avant d’être regroupés dans un environnement distinct de l’application client ou du serveur rendu côté serveur.

Étant donné que les composants React Server s’exécutent sur un serveur Web, ils peuvent accéder directement à la couche de données sans avoir besoin d’interagir avec une API !

import db from "./database";


async function BlogPost({ postId }) {
  
  const post = await db.posts.get(postId);

  
  const comments = await db.comments.getByPostId(postId);

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
      <h3>Comments</h3>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>
            <Comment {...comment} />
          </li>
        ))}
      </ul>
    </div>
  );
}

Comme c’est cool ! Cela élimine le besoin d’exposer un point de terminaison d’API ou d’utiliser une logique de récupération supplémentaire côté client pour charger des données dans nos composants puisque toute la gestion des données est effectuée sur le serveur.

N’oubliez pas que les composants serveur s’exécutent sur le serveur, pas sur le navigateur, ils ne peuvent donc pas utiliser les API de composants React traditionnelles comme useState. Pour ajouter de l’interactivité à un composant React Server, nous devons utiliser des composants clients qui complètent les composants serveur pour gérer l’interactivité.

En poursuivant l’exemple d’article de blog ci-dessus, cela impliquerait de rendre le Comment composant en tant que composant client qui inclut un certain état et une certaine interactivité.


"use client";

export function Comment({ id, text }) {
  const [likes, setLikes] = useState(0);

  function handleLike() {
    setLikes(likes + 1);
  }

  return (
    <div>
      <p>{text}</p>
      <button onClick={handleLike}>Like ({likes})</button>
    </div>
  );
}

Notez le "use client" déclaration en haut du fichier de composant dans l’exemple ci-dessus. Cela indique que le composant est un composant client lorsque vous travaillez avec des composants React Server. Cela signifie qu’il peut gérer l’état, gérer les interactions des utilisateurs et utiliser des API spécifiques au navigateur. Cette directive indique au framework et au bundle React de traiter ce composant différemment des composants serveur, qui sont sans état et exécutés sur le serveur.

D’un autre côté, les composants React Server sont la valeur par défaut, nous n’avons donc pas besoin d’indiquer « utiliser le serveur » en haut des fichiers de composants serveur. Au lieu de cela, « utiliser le serveur » n’est utilisé que pour désigner les fonctions côté serveur qui peuvent être appelées à partir des composants clients. Ces fonctions sont connues sous le nom Actions du serveur.

Bien qu’écrit alors que React 19 était encore en version bêta, Jonathan Gamble a écrit un article excellent et concis sur Le paradigme des composants du serveur React.

Autres améliorations

React 19 introduit également plusieurs autres améliorations pour améliorer encore l’expérience des développeurs et les performances des applications.

Passer la référence comme accessoire

Dans React 19, on peut désormais passer ref directement comme accessoire pour les composants fonctionnels :

function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />;
}


<MyInput ref={ref} />;

Ce changement signifie que nous n’avons plus besoin forwardRefqui sera obsolète et supprimé dans les futures versions de React.

Contexte en tant que fournisseur

Avec React 19, nous pourrons rendre <Context> directement en tant que fournisseur au lieu d’avoir à spécifier <Context.Provider>simplifiant la syntaxe :

import { createContext } from "react";

const MyContext = createContext();

function App() {
  return (
    <MyContext value={}>
      {}
    </MyContext>
  );
}

Fonction de nettoyage pour les références

Nous pouvons maintenant renvoyer une fonction de nettoyage à partir des rappels ref dans React 19 :

<input
  ref={(ref) => {
    
    return () => {
      
    };
  }}
/>

Tout comme le comportement de la fonction de nettoyage dans le useEffect hook, la fonction de nettoyage renvoyée par le rappel ref sera appelée lorsque le composant sera démonté.

Prise en charge des métadonnées des documents

React 19 ajoute une prise en charge native pour le rendu des balises de métadonnées de document telles que <title>, <link> et <meta> au sein des composants, alors que dans le passé, les développeurs s’appuyaient généralement sur des bibliothèques externes telles que casque de réaction ou suivant/tête pour gérer ces balises.

function Component({ data }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="author" content="Hassan Djirdeh" />
      <link rel="author" href="https://twitter.com/djirdehh/" />
      <meta name="keywords" content={post.keywords} />
    </article>
  );
}

Ces balises sont automatiquement hissées au <head> du document, garantissant la compatibilité avec les applications client uniquement, le streaming SSR et les composants serveur.

Diffs et meilleur rapport d’erreurs

Rapport d’erreurs pour les erreurs d’hydratation dans react-dom a été amélioré. Au lieu de consigner plusieurs erreurs en mode développement sans informations détaillées, React 19 consigne désormais un seul message avec une différence de non-concordance.

Uncaught Error: Hydration failed because the server rendered HTML didn’t match the client. As a result this tree will be regenerated on the client. This can happen if an SSR-ed Client Component is used:

- A server/client branch if (typeof window !== 'undefined').
- Variable input such as Date.now() or Math.random() which changes each time it’s called.
- Date formatting in a user’s locale which doesn’t match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  <App>
    <span>
+    Client
-    Server

  at throwOnHydrationMismatch
  …

Ce message d’erreur plus clair aide les développeurs à identifier et à résoudre rapidement les problèmes d’hydratation.

De même, dans React 19, des améliorations ont été apportées au rapport d’erreurs pour gérer les erreurs détectées et non détectées, en enregistrant un seul message d’erreur avec toutes les informations pertinentes au lieu de messages d’erreur en double. De plus, deux nouvelles options racine ont été ajoutées pour gérer différents types d’erreurs afin de compléter l’existant. onRecoverableError option racine :

  • onCaughtError: appelé lorsque React détecte une erreur dans une limite d’erreur
  • onUncaughtError: appelé lorsqu’une erreur est générée et n’est pas détectée par une limite d’erreur

Et d’autres améliorations

React 19 comprend également :

  • Prise en charge des éléments personnalisés : Prise en charge complète des éléments personnalisés, traitant les accessoires comme des attributs ou des propriétés de manière appropriée
  • Prise en charge des scripts asynchrones : Prise en charge améliorée des scripts asynchrones, leur permettant d’être rendus n’importe où dans l’arborescence des composants
  • Ressources de préchargement : Nouvelles API pour le préchargement des ressources, l’optimisation du chargement initial des pages et des mises à jour côté client
  • Compatibilité avec les scripts et extensions tiers : Hydratation améliorée pour tenir compte des scripts tiers et des extensions de navigateur

Vous pouvez trouver plus de détails et d’informations dans le Améliorations de React 19 » de la documentation React.

Conclure

React 19 est un grand pas en avant pour l’écosystème React, doté de nouvelles fonctionnalités et améliorations pour rendre l’expérience de développement meilleure et nos applications plus puissantes. Avec les nouveaux hooks et API, les composants React Server et la suppression des API obsolètes, il y a de quoi s’enthousiasmer.

Les mises à jour introduites dans React 19 apportent quelques changements radicaux, mais l’équipe React a pris des mesures pour garantir que le processus de mise à niveau soit aussi fluide que possible. Vous pouvez trouver plus de détails sur la meilleure façon de procéder à la mise à niveau dans le Guide de mise à niveau de React 19 à partir de la documentation officielle de React.



Le meilleur outil 2023 pour ta croissance Instagram !



Source link