Tout sur le nouveau Hook React : useOptimistic

Découvrez useOptimistic, le hook React qui rend vos interfaces plus réactives avec des mises à jour instantanées. Fluidifiez l'expérience utilisateur et simplifiez la gestion de vos erreurs.

Louis-Nicolas Leuillet

Mis à jour le 3 décembre 2024

React, la librairie JavaScript permettant de créer des interfaces utilisateurs réactives ne cesse d'évoluer.

Avec l'arrivée de React 19, l'équipe derrière React a été encore plus loin dans l'amélioration de l'expérience utilisateur grâce à un tout nouveau hook : useOptimistic.

Ce hook vise à améliorer les performances relatives d'une mise à jour de l'interface après que des informations aient été ajoutées, modifiées ou supprimées.

Qu'est-ce que le hook useOptimistic ? 🤔

Le hook useOptimistic permet de mettre à jour l'interface utilisateur de manière immédiate sans attendre la confirmation des données du serveur. C’est ce qu’on appelle une mise à jour optimiste.

Elle permet d'offrir une meilleure réactivité à l'utilisateur en assumant que l'action sera réalisée avec succès et qu'aucune erreur ne sera rencontrée.

Pourquoi utiliser useOptimistic ? 👀

L'objectif principal de useOptimistic est d'améliorer la réactivité d'une application web. Imaginez une application où un utilisateur doit attendre plusieurs secondes après avoir cliqué sur un bouton à cause d'une latence de sa connexion internet...

Avec useOptimistic, vous pouvez répondre instantanément aux actions de votre utilisateur tout en gérant les erreurs éventuelles plus tard.

En quelque sorte, on modifie l'interface avant d'envoyer la mise à jour sur notre serveur. Ceci nous donne ainsi une impression de fluidité.

Comment fonctionne useOptimistic ? 🛠️

useOptimistic est conçu pour réaliser une mise à jour immédiate tout en gardant en mémoire l'état (on parle de state) précédent, afin de revenir en arrière en cas de problème.

Voici comment vous pouvez l'utiliser ! 😉

Logique derrière le hook

Voici un schéma pour comprendre la logique qui se cache derrière le fonctionnement de useOptimistic :

YAML

Étape 1 : Action utilisateur (exemple : ajout d'un message)
↓
Étape 2 : Mise à jour immédiate de l'interface
↓
Étape 3 : Envoi des données au serveur (réalisée en arrière-plan)
↓
Étape 4 : Si tout se passe bien du serveur → Conserver le state modifié
          Sinon → Revenir au state original

Syntaxe de base du hook

Commençons par un exemple avec la syntaxe de base du hook useOptimistic :

JSX

const [optimisticValue, updateOptimistic] = useOptimistic(initialState, (currentState, newState) => {
  return newState;
});

Explications :

optimisticValue : Notre valeur à utiliser dans notre code JSX
updateOptimistic : Nous retourne une fonction qui permet de déclencher une mise à jour optimiste (comme une fonction que l'on retrouverait avec le hook useState avec comme différence que cette modification sera réalisée de façon optimiste)
initialState : Il s'agit de l'état (du state) d'origine
currentState et newState : Nos deux states à fusionner

Exemple d'utilisation

Prenons l'exemple d'une application où un utilisateur ajoute un message dans une discussion. Avec useOptimistic, le message est immédiatement visible à l'écran, bien avant que la réponse du serveur ne soit reçue.

Nous avons ainsi une application très fluide avec une impression d'instantanéité. Tout ceci améliore l'expérience utilisateur.

JSX

function MessageSection() {
  const [messages, updateOptimistic] = useOptimistic([], (prevMessages, newMessage) => [
    ...prevMessages,
    newMessage
  ]);

  const handleAddMessage = async (newMessage) => {
    updateOptimistic(newMessage);

    try {
      await fetch("...");
    } catch (error) {
      console.error("Erreur", error);
    }
  };

  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <button onClick={() => handleAddMessage("Nouveau message")}>
        Ajouter un message
      </button>
    </div>
  );
}

Les avantages de useOptimistic ✅

L'expérience utilisateur est améliorée

Comme nous l'avons vu, utiliser useOptimistic permet d'améliorer l'expérience utilisateur. Ainsi vos visiteurs ne ressentiront plus cette attente parfois frustrante entre le moment où ils déclenchent une action (comme appuyer sur un bouton pour envoyer un formulaire) et la réponse du serveur qui engendre une mise à jour de l'interface.

Ici, l'interface réagit instantanément !

La gestion des erreurs est très simplifiée

En cas de problème de mise à jour ou sur le serveur, le hook useOptimistic permet de revenir très facilement au state précédent naturellement : il le fait pour nous.

Nous n'avons plus besoin de gérer toute la logique qui permet de mettre à jour ou non l'interface !

Cas d'utilisation fréquents 📝

On peut imaginer utiliser ce nouveau hook dans plusieurs cas pour lesquels une mise à jour immédiate de l'interface serait une grande plus-value pour notre site :

Pour les interfactions immédiates (comme un like, un partage, une mise en favori)
Pour les modifications d'articles (ou de publications plus globalement)
Pour les salons de discussion

Différences entre useOptimistic et useState 💥

Le hook useOptimistic et le hook useState sont tous deux utilisés pour gérer les données dans une application React.

Cependant, ils répondent à des besoins différents et ont des comportements distincts.

Voici un petit tableau qui permet rapidement de se faire une idée sur les différences entre les deux :

Critère	Avec le hook `useState`	Avec le hook `useOptimistic`
Réactivité	Doit attendre la mise à jour sur le serveur avant de modifier l'interface	Interface modifiée immédiatement
Cas d'usage	On l'utilise quand l'interface doit montrer l'état réel des données (exemple : réserver une place pour le cinéma par exemple)	On l'utilise quand l'interface peut montrer l'état optimiste des données (exemple : pendant une discussion)
Expérience utilisateur	Il est possible que l'utilisateur doivent patienter que le serveur réponde avant de voir une modification	L'utilisateur voit directement le changement

Conclusion

Le hook useOptimistic est une fonctionnalité puissante et efficace introduite par React 19 pour améliorer l'interactivité ainsi que l'instantanéité (on parle aussi de fluidité).

Utilisé dans les bons scénarios, il permet d'avoir un véritable avantage concurrentiel.

Si vous voulez en apprendre plus sur React, c'est par ici ! 👈

FAQ 👇

Nos apprenants nous posent souvent des questions sur useOptimistic, voici un petit condensé pour répondre à vos questions !

Pourquoi devrais-je utiliser useOptimistic ?

Pour rendre ton application plus réactive ! Imagine une partie "commentaires" par exemple. Ce serait beaucoup mieux si ton utilisateur n'attendait pas avant de voir son commentaire.

Est-il possible de combiner useOptimistic avec d'autres hooks ?

Oui, tu peux l'utiliser avec d'autres hooks comme useReducer par exemple afin d'effectuer des scénarios plus complexes.

Quels sont les cas d'utilisation parfaits pour useOptimistic ?

Tu peux utiliser useOptimistic sur tes boutons pour modifier, ajouter ou supprimer quelque chose. Tout ce qui permet d'améliorer l'expérience de ton utilisateur par l'instantanéité est une piste intéressante pour utiliser useOptimistic.

Comment en savoir plus React ? Quelle formation choisir ?

Il y en a plusieurs, mais la notre serait une piste intéressante si tu as apprécié cet article ! 😋

Page de notre formation React

Catégorie : Développement