Alimenter Next.js / Blogs / Perficient

Dans le blog d’aujourd’hui, nous examinerons un hook expérimental qui nous aide à afficher des résultats optimisés lorsque nous affichons les données que nous récupérons du serveur. Que pouvons-nous faire pour optimiser un tel cas d’utilisation ? Existe-t-il un moyen d’afficher les données mises à jour au fur et à mesure qu’elles sont récupérées sur le serveur ? Nous explorerons précisément cela avec le nouveau utiliserOptimiste crochet.

Ce hook de React nous donne une copie de nos données, que nous lui transmettons, et une fonction similaire au fonctionnement de useState. Cette fonction est ensuite utilisée pour manipuler les données copiées que nous affichons dans notre application jusqu’à ce que les nouvelles données soient récupérées du serveur ou de l’appel API.

Implémentation du hook « useOptimistic » dans votre projet

Comme utiliserFormStatus et useFormState dans les blogs précédents, il s’agit d’un hook expérimental de React-Dom ; par conséquent, il ne sera pas disponible avec la commande habituelle du package npm install. Pour ce faire, exécutez la commande suivante dans votre terminal pour installer la version expérimentale de React et React-Dom :

npm install react@experimental react-dom@experimental

Après avoir installé les packages expérimentaux, votre package.json doit contenir les dépendances répertoriées ci-dessous :

Après cela, si vous souhaitez utiliser TypeScript dans votre projet, vous devez également créer un fichier informant votre projet que vous utiliserez les utilitaires expérimentaux :

Ensuite, vous devriez pouvoir importer useFormState dans vos fichiers et l’utiliser de manière appropriée. Si vous utilisez TypeScript, vous devrez peut-être ajouter « //@ts-ignore » au-dessus de l’importation. TypeScript ne reconnaîtra pas cette importation expérimentale mais continuera à fonctionner comme prévu.

//@ts-ignore
import { useFormState } from "react-dom";

Développement d’une interface utilisateur simple

Créons maintenant un composant de réaction simple affichant une entrée et un bouton. Vous pouvez également utiliser un formulaire ici ; J’ai simplement utilisé la propriété onClick du bouton pour recréer le scénario d’appel de service API.

return (
    <div className="bg-dark text-white py-5">
      <div className="row mx-0">
        <h2 className="text-center">useOptimistic</h2>
        <div className="col-md-6 p-5">
          <input
            ref={inputRef}
            type="text"
            className="form-control my-3"
            placeholder="Enter item name"
          />
          <button
            disabled={isLoading}
            onClick={() => startTransition(() => onClick())}
            className="btn btn-warning form-control"
          >
            Add Item
          </button>
        </div>
      </div>
    </div>
  );

Nous avons maintenant un simple composant de saisie et de bouton. Le composant d’entrée est passé avec un inputRef créé à l’aide du hook useRef de réagir, et la fonction onClick du bouton est enveloppée dans une fonction startTransition pour simuler le chargement.

Les utilitaires répertoriés dans le formulaire

Ensuite, nous examinons les hooks utiles que nous devons importer dans notre application et quelques autres utilitaires utiles que nous utiliserons pour démontrer notre nouveau hook.

import { useState, useOptimistic, useTransition, useRef } from "react";
import "bootstrap/dist/css/bootstrap.css";

function App() {
  const createItem = (item) => {
    return new Promise((resolve) => setTimeout(() => resolve(item), 2000));
  };
  const inputRef = useRef();
  const [isLoading, startTransition] = useTransition();

  const [itemList, setItemList] = useState([]);
  const [optimisticItems, setOptimisticItems] = useOptimistic(itemList);

Comme le montre le code ci-dessus, nous importons tous nos hooks depuis React. Comme je l’ai mentionné plus tôt, nous utilisons la fonction « startTransition » pour simuler le chargement ici. Nous prenons cette fonction comme deuxième valeur qui nous est fournie par le hook useTransition dans React, la première étant l’état de chargement de la fonction avec laquelle nous utilisons startTransition.

J’ai créé une fonction ici pour reproduire le comportement de l’appel de service API lors de la récupération des données. Il s’agit de la fonction createItem. En gros, cela me renvoie une valeur avec un délai de 2 secondes. En dehors de cela, nous avons juste le inputRef, que nous utiliserons pour obtenir les données de l’entrée et useState pour mettre les données dans un tableau.

La dernière ligne du code ci-dessus correspond à ce que nous recherchons. Nous utilisons le hook useOptimistic pour dupliquer notre itemList, en la stockant dans la variable optimisticItems. Le deuxième élément que nous obtenons de ce hook est une fonction qui met à jour le même état copié. Nous utiliserons cette méthode pour mettre à jour initialement notre état copié jusqu’à ce que l’appel de service soit terminé et que nous ayons les données correctes dans notre variable itemList. Examinons donc la fonction dans laquelle nous effectuerons cet appel.

const onClick = async () => {
   const inputValue = inputRef.current.value;
   if (inputRef.current == null || !inputValue) return;
   setOptimisticItems((list) => [
     ...list,
     {
       itemName: inputValue,
       key: crypto.randomUUID(),
       loading: true,
     },
   ]);
   const newItem = await createItem(inputValue);
   setItemList((list) => [
     ...list,
     {
       key: crypto.randomUUID(),
       itemName: newItem,
     },
   ]);
 };

Fonction setOptimisticItems

Passons en revue ce code un par un. Tout d’abord, nous prenons la valeur de input de inputRef et vérifions si elle est vide. S’il est vide, on reviendra simplement de la fonction. Ensuite, nous avons la fonction setOptimisticItems, qui est essentiellement l’objectif principal de ce blog.

Ici, nous gardons les choses aussi simples que possible. Nous obtenons l’état précédent comme premier paramètre de cette fonction, qui serait la liste d’éléments existante, nous allons donc étaler ce tableau et ajouter notre nouvelle valeur à sa fin. Cela crée maintenant notre tableau de données et y place les dernières données avant le début de l’appel de service dans la ligne suivante. Nous lui donnons également une valeur de chargement que nous utiliserons pour indiquer qu’il ne s’agit pas de données complètes, nous en reparlerons plus tard.

Dans la ligne suivante, nous effectuons l’appel de service (ou simulons un appel de service dans ce cas), obtenons des données réelles du service et mettons à jour notre état avec ces données exactes. Par conséquent, jusqu’à ce que nous effectuions l’opération d’attente, nous avons déjà affiché les données souhaitées en utilisant la valeur optimiste. Voyons comment nous pouvons implémenter en utilisant l’indicateur de chargement que j’ai mentionné plus tôt.

<div className="col-md-6 p-5 ms-4">
  <div>Item's List:</div>
  <ul className="my-3">
    {optimisticItems.map(({ itemName, loading, key }) => (
      <li key={key} className={loading ? "opacity-50" : "opacity-100"}>
        {itemName}
        {loading ? "..." : null}
      </li>
    ))}
  </ul>
</div>

Dans le code ci-dessus, nous montrons que la valeur qui n’est pas encore chargée sera affichée avec une demi-opacité et aura des points de suspension à la fin pour indiquer qu’elle est en cours de chargement ou qu’elle attend la fin de l’appel de service.

Sortir

Etat de forme initial :

L’utilisateur saisit une valeur dans le champ de saisie :

Le bouton Ajouter peut être cliqué pour démarrer un appel de service :

La valeur apparaît moins visible que le texte standard et comporte des points de suspension à la fin pour indiquer l’état de chargement. Lorsque le chargement est terminé ou que l’appel API se termine avec succès, il apparaîtra dans son état normal, comme le montre l’image ci-dessous.

C’est essentiellement ainsi que nous pouvons afficher les données avant qu’elles ne fassent finalement partie de la base de données et indiquer que les données appropriées sont chargées à l’aide de ce hook. Une autre capture d’écran pour montrer la même chose.

Un moyen simple mais puissant d’optimiser les interactions des utilisateurs dans les applications Next.js consiste à inclure le hook « useOptimistic ». Les développeurs peuvent garantir un plaisir d’utilisation amélioré et de meilleures performances en mettant en œuvre des mises à jour optimistes. ‘useOptimistic’ est un utilitaire utile pour les développeurs Next.js, offrant de meilleures expériences utilisateur avec moins de travail grâce à son effet et sa simplicité.