Ce que le nouveau React a apporté - Obtenez une compréhension claire

React 19 est sorti le 25 avril 2024. Le monde JavaScript évolue si rapidement qu'il peut parfois sembler difficile de suivre le rythme. Mais lorsque ces changements visent à vous faciliter la vie en tant que développeur React, cela vaut la peine d'y jeter un coup d'œil, n'est-ce pas ? Étant donné que React est un élément si important de cet écosystème, il est indispensable de rester à jour.

La meilleure partie de React 19 est qu'il vise à simplifier les choses. Les mises à jour sont conçues pour faciliter l'apprentissage de React et vous permettre de passer plus de temps à créer au lieu de gérer des configurations délicates. Certaines des nouvelles fonctionnalités changent vraiment la donne et pourraient faire une grande différence dans votre façon de travailler, vous ne voulez donc certainement pas les manquer.

J’essaie toujours d’expliquer les choses d’une manière facile à comprendre, sans utiliser de mots compliqués. Cet article ne fait pas exception. Mon objectif est de m'assurer que tout soit clair, alors explorons ensemble les superbes mises à jour de React 19 !

N'oubliez pas que React 19 n'est pas encore tout à fait stable. Actuellement, il s’appelle React Canary. Gardez donc à l’esprit que ce n’est pas réellement recommandé pour la production.

Compilateur React

Pour optimiser nos applications React, nous utilisons certaines méthodes intégrées comme useMemo, useCallback ou memo. Cela indique à React de ne pas recompiler le code si les entrées ne changent pas. Mais si vous oubliez d'appliquer la mémorisation, cela entraîne un gaspillage des ressources et de la puissance de calcul de React. Pour résoudre ce problème, React 19 a introduit React Compiler. Le nouveau compilateur de React est l’œil de la nouvelle version de la 19e version. Le nouveau compilateur optimise votre code en arrière-plan, afin que vous puissiez supprimer ces hooks et vous concentrer sur l'écriture de composants React magnifiques et propres.

En bref, vous n'avez pas besoin d'envelopper vos fonctions avec useMemo ou useCallback pour des performances optimisées, et vous n'avez pas non plus besoin d'envelopper votre composant avec memo pour éviter de restituer vos composants.

Actions (hook useTransition)

Parlons du charabia ?!! Avez-vous remarqué à quel point le hook useTransition était à peine mentionné avant la sortie de React 19 ? Ou est-ce juste moi ? Eh bien, c'est du moins ce que j'ai remarqué, notamment parmi les développeurs juniors. Quoi qu'il en soit, laissez-moi vous donner une idée de la façon dont cela fonctionnait dans la version précédente et nous verrons ensuite pourquoi c'est une fonctionnalité si importante maintenant.

useTransition renvoie un tableau avec deux éléments, la fonction startTransition et le booléen isPending. Vous pouvez envelopper vos mises à jour d'état dans la fonction startTransition pour les marquer comme transitions (moins de code de priorité). Ce qui signifie que la partie enveloppée avec startTransition commence à fonctionner une fois les autres tâches continues terminées.

Dans React 18, la fonction startTransition ne prenait pas en charge les fonctions asynchrones directement. Il s'agissait d'une limitation car startTransition était conçu pour marquer les mises à jour comme étant de faible priorité mais ne pouvait pas gérer la logique asynchrone de manière native.

Dans React 19, cette limitation a été corrigée. Désormais, startTransition prend en charge les fonctions asynchrones, ce qui signifie que vous pouvez y effectuer des tâches asynchrones (par exemple, récupérer des données) tout en conservant ces mises à jour marquées comme transitions. Cette amélioration permet une utilisation plus flexible et intuitive de startTransition, ce qui lui donne l'impression d'être une « nouvelle » fonctionnalité même s'il s'agit techniquement d'une amélioration d'une fonctionnalité existante.

?
Par convention, les fonctions qui utilisent des transitions asynchrones sont appelées « Actions ».

Par exemple, vous pouvez gérer l'état d'attente et d'erreur dans useState :

// Before Actions
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>
  );
}

React 19 prend en charge l'utilisation de fonctions asynchrones dans les transitions pour gérer automatiquement les états en attente, les erreurs, les formulaires et les mises à jour optimistes. Par exemple, vous pouvez utiliser useTransition pour gérer l'état en attente pour vous :

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      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>
  );
}

La transition asynchrone définira immédiatement l'état isPending sur true, effectuera la ou les requêtes asynchrones et fera passer isPending à false après toute transition. Cela vous permet de garder l'interface utilisateur actuelle réactive et interactive pendant que les données changent.

Actes

L'équipe React a ajouté la prise en charge des fonctions de transmission au fur et à mesure de l'action.

export default function App() {
    const [name, setName] = useState(
        () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
    )

    async function formAction(formData){
        try {
            const newName = await updateNameInDB(formData.get("name"))
            setName(newName)
        }
    }

    return (
        <>
            <p className="username">
                Current user: <span>{name}</span>
            </p>
            <form action={formAction}>
                <input
                    type="text"
                    name="name"
                    required
                />
                <button type="submit">Update</button>
            </form>
        </>
    )
}

La fonction formAction (vous pouvez nommer n'importe quoi) vous récupère les données du formulaire dans son paramètre. Chaque champ est désigné par un attribut de nom et vous devez donc être prudent lorsque vous nommez les entrées. le paramètre formData est en fait l'objet natif de l'API Web FormData. Vous pouvez le découvrir sur mdn web docs. Une autre bonne chose est que vous n'avez pas besoin d'appliquer event.preventDefault() car il est géré par React.

Lorsqu'une action de formulaire réussit, React réinitialise automatiquement le formulaire. Mais si vous souhaitez réinitialiser le

manuellement, vous pouvez appeler la nouvelle API DOM requestFormReset React.

Nouveau crochet : useActionState

?
React.useActionState s'appelait auparavant ReactDOM.useFormState dans les versions Canary, mais il a été renommé et obsolète useFormState.

useActionState suit l'état du composant, l'état en attente et fournit une fonction d'action encapsulée à utiliser dans un formulaire ou à tout autre endroit où nous pourrions vouloir effectuer une mutation.

Voici un exemple pour le décomposer de manière plus descriptive :

import { useActionState } from "react"
import { updateNameInDB } from "../api/user"

export default function App() {
    const [user, formAction, isPending] = useActionState(insertName, {
        name: "John Doe",
        error: null
    })

    async function insertName(prevState, formData){
        try {
            const response = await updateNameInDB(formData.get("name"))
            return {name: response.name}
        }catch(error){
            return {...prevState, error: error.error}
        }
    }

    return (
        <>
            {user?.name && (
                <p>



<p>How this hook works is described with reference to the example:</p>

<ol>
<li><p>The first argument of the useActionState hook is the "Action" function, which is defined here as insertName.</p></li>
<li><p>The second argument is the initial state, which is accessible through the first element of the result array. In this example, the initial state includes name and error, and the state is represented as user in the component.</p></li>
<li><p>The insertName function returns the updated state. If the operation is successful, it updates the name property. If an error occurs, it updates the error property while preserving the rest of the previous state.</p></li>
<li>
<p>The result of the useActionState hook is an array with three elements:</p>

<ul>
<li>The current state (user): Reflects the latest state of the data.</li>
<li>A dispatchable function (formAction): Triggers the action when called, as seen in the form element's action attribute.</li>
<li>A pending state (isPending): Tracks whether the action is currently in progress, useful for managing transitions or loading indicators.</li>
</ul>
</li>
</ol>

<h2>
  
  
  New Hook: useOptimistic
</h2>

<p>When it’s performing a data mutation and to show the final state right after the user instructs (could be a tap on a button) or you could say optimistically while the async request is underway, you need to use this hook. Here is a demonstration how you can do this:<br>
</p>

<pre class="brush:php;toolbar:false">function ChangeName({currentName, onUpdateName}) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

Le hook useOptimistic restituera immédiatement le optimisticName pendant que la demande updateName est en cours. Une fois la mise à jour terminée, React insérera la valeur mise à jour dans currentName ou si la mise à jour génère des erreurs, React reviendra automatiquement à la valeur currentName.

Nouveau crochet : useFormStatus

le hook useFormStatus vous aide à garder une trace de vos soumissions de formulaire. Attends une minute ?! est-ce un autre hook pour suivre la transition asynchrone ? eh bien, la réponse est « oui » et « non » à la fois. Comme vous avez déjà appris le hook useActionState, vous pourriez dire qu'il s'agit d'un autre hook pour suivre la transition asynchrone. Mais useFormStatus ne provoque aucune action, mais fournit plutôt des informations sur l'état de la dernière soumission du formulaire.

// Before Actions
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>
  );
}

Eh bien, je dirais que la chose la plus importante à remarquer ici est que le hook useFormStatus vient en fait de React-Dom, et non de réaction.

useFormStatus lit le statut du comme si le formulaire était un fournisseur de contexte. Pour obtenir des informations d'état, le composant Soumettre doit être affiché dans un . Le Hook renvoie des informations telles que la propriété en attente qui vous indique si le formulaire est en cours de soumission active.

Dans l'exemple ci-dessus, Soumettre utilise ces informations pour désactiver appuie pendant la soumission du formulaire.

Nouvelle API : utilisation

vous pouvez lire une promesse avec utilisation, et React suspendra le composant jusqu'à ce que la promesse soit résolue :

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      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>
  );
}

L'exemple ci-dessus montre le cas d'utilisation de l'API use. « Commentaires » est un composant qui consomme une promesse appelée « commentsPromise ». La promesse est consommée par la nouvelle API d'utilisation qui lui fait suspendre le composant. À propos, vous devez envelopper le composant avec la solution de secours Suspense.

L'API d'utilisation a une limitation dont vous devez être conscient. La limitation est que chaque fois que l'utilisation de l'API contenant un composant effectue un nouveau rendu, elle crée une autre promesse qui entraîne de mauvaises performances. Donc, fondamentalement, il n’a pas de mécanisme de mise en cache. Voici leur note prudente du blog de sortie :

use API lit également les données à partir du contexte. Par exemple, pour lire les valeurs de contexte, nous transmettons simplement le contexte à use(), et la fonction parcourt l'arborescence des composants pour trouver le fournisseur de contexte le plus proche.

Contrairement au Hook useContext() pour lire le contexte, la fonction use() peut être utilisée dans les conditions et les boucles de nos composants !

export default function App() {
    const [name, setName] = useState(
        () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
    )

    async function formAction(formData){
        try {
            const newName = await updateNameInDB(formData.get("name"))
            setName(newName)
        }
    }

    return (
        <>
            <p className="username">
                Current user: <span>{name}</span>
            </p>
            <form action={formAction}>
                <input
                    type="text"
                    name="name"
                    required
                />
                <button type="submit">Update</button>
            </form>
        </>
    )
}

ref comme accessoire (Pas de forwardRef)

Dans React 19, vous pouvez transmettre des références comme n'importe quel autre accessoire, ce qui conduit à la dépréciation de forwardRef . Cela rationalise le code de votre composant et facilite la gestion des références. ?

import { useActionState } from "react"
import { updateNameInDB } from "../api/user"

export default function App() {
    const [user, formAction, isPending] = useActionState(insertName, {
        name: "John Doe",
        error: null
    })

    async function insertName(prevState, formData){
        try {
            const response = await updateNameInDB(formData.get("name"))
            return {name: response.name}
        }catch(error){
            return {...prevState, error: error.error}
        }
    }

    return (
        <>
            {user?.name && (
                <p>



<p>How this hook works is described with reference to the example:</p>

<ol>
<li><p>The first argument of the useActionState hook is the "Action" function, which is defined here as insertName.</p></li>
<li><p>The second argument is the initial state, which is accessible through the first element of the result array. In this example, the initial state includes name and error, and the state is represented as user in the component.</p></li>
<li><p>The insertName function returns the updated state. If the operation is successful, it updates the name property. If an error occurs, it updates the error property while preserving the rest of the previous state.</p></li>
<li>
<p>The result of the useActionState hook is an array with three elements:</p>

<ul>
<li>The current state (user): Reflects the latest state of the data.</li>
<li>A dispatchable function (formAction): Triggers the action when called, as seen in the form element's action attribute.</li>
<li>A pending state (isPending): Tracks whether the action is currently in progress, useful for managing transitions or loading indicators.</li>
</ul>
</li>
</ol>

<h2>
  
  
  New Hook: useOptimistic
</h2>

<p>When it’s performing a data mutation and to show the final state right after the user instructs (could be a tap on a button) or you could say optimistically while the async request is underway, you need to use this hook. Here is a demonstration how you can do this:<br>
</p>

<pre class="brush:php;toolbar:false">function ChangeName({currentName, onUpdateName}) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

L'équipe React a décidé de rendre forwardRef obsolète dans les prochaines versions.

Composants du serveur React

À propos, sachez que les composants React Server (RSC) sont une fonctionnalité React qui prend en charge le rendu côté serveur, mais des frameworks comme Next.js ont adopté les RSC et les ont intégrés de manière transparente dans leur flux de travail. Si vous êtes un nouveau venu dans l'écosystème, clarifiez cette chose avant de vous lancer dans l'étude de son mécanisme.

Les composants du serveur React sont une nouvelle fonctionnalité introduite dans React 19 qui nous permet de créer des composants React sans état qui s'exécutent sur le serveur.

Étant donné que les composants de React Server peuvent s'exécuter sur un serveur Web, ils peuvent être utilisés pour accéder à la couche de données sans avoir à interagir avec une API !

// Before Actions
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>
  );
}

Grâce à cela, nous n'avons pas 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 les données directement dans nos composants. Tout le traitement des données est effectué sur le serveur.

Gardez à l'esprit que les composants serveur sont exécutés sur le serveur et non sur le navigateur. En conséquence, ils ne peuvent pas utiliser les API des composants React traditionnels comme useState. Pour introduire l'interactivité dans un paramètre de composant React Server, nous devrons exploiter les composants clients qui complètent les composants serveur pour gérer l'interactivité.

Lorsque vous travaillez avec des composants React Server, « utiliser le client » indique que le composant est un composant client, ce qui 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 explicitement 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.

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      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>
  );
}

D'un autre côté, les composants React Server sont la valeur par défaut, nous n'indiquons donc pas « utiliser le serveur » en haut des fichiers de composants serveur. Au lieu de cela, « utiliser le serveur » ne doit être utilisé que pour marquer les fonctions côté serveur qui peuvent être appelées à partir des composants clients.

export default function App() {
    const [name, setName] = useState(
        () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
    )

    async function formAction(formData){
        try {
            const newName = await updateNameInDB(formData.get("name"))
            setName(newName)
        }
    }

    return (
        <>
            <p className="username">
                Current user: <span>{name}</span>
            </p>
            <form action={formAction}>
                <input
                    type="text"
                    name="name"
                    required
                />
                <button type="submit">Update</button>
            </form>
        </>
    )
}

Je pense que cet exemple le clarifie bien.

Conclusion

React 19 s'appelle toujours React Canary. Ce ne serait donc pas une bonne idée de l’utiliser pour la production. Mais embrassez l'avenir avec React 19 et rendez votre expérience de développement plus fluide et plus agréable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!