Découvrez le hook useOptimistic de React pour créer des UI plus rapides et réactives grâce aux mises à jour optimistes. Apprenez avec des exemples pratiques.
React useOptimistic : Créer des interfaces utilisateur réactives avec des mises à jour optimistes
Dans le paysage actuel du développement web, l'expérience utilisateur est primordiale. Les utilisateurs s'attendent à ce que les applications soient réactives et fournissent un retour immédiat. Une technique pour améliorer considérablement les performances perçues consiste à utiliser les mises à jour d'interface utilisateur optimistes. React 18 a introduit le hook useOptimistic, un outil puissant pour mettre en œuvre cette technique. Cet article se penche sur le concept d'UI optimiste, explore en détail le hook useOptimistic et fournit des exemples pratiques pour vous aider à l'exploiter dans vos applications React.
Que sont les mises à jour d'interface utilisateur optimistes ?
Les mises à jour d'interface utilisateur optimistes consistent à mettre à jour l'interface utilisateur avant de recevoir la confirmation du serveur qu'une action a été effectuée avec succès. Au lieu d'attendre la réponse du serveur, l'UI est mise à jour immédiatement comme si l'action avait réussi. Cela crée l'illusion d'une réactivité instantanée, rendant l'application beaucoup plus rapide et fluide.
Prenons un scénario où un utilisateur clique sur un bouton "J'aime" sur une publication de réseau social. Dans une implémentation traditionnelle, l'application enverrait une requête au serveur pour enregistrer le "J'aime" et attendrait la confirmation du serveur. Pendant ce temps, l'utilisateur pourrait subir un léger retard ou voir une indication visuelle de chargement. Avec les mises à jour optimistes, le bouton "J'aime" est immédiatement mis à jour pour refléter que l'utilisateur a aimé la publication, sans attendre le serveur. Si la requête serveur échoue par la suite (par exemple, en raison d'une erreur réseau), l'UI peut être restaurée à son état précédent.
Avantages des mises à jour d'interface utilisateur optimistes
- Amélioration des performances perçues : En fournissant un retour immédiat, les mises à jour optimistes donnent l'impression que l'application est plus rapide et plus réactive. Cela améliore l'expérience utilisateur globale, quelle que soit la latence réelle du réseau.
- Engagement utilisateur accru : La confirmation visuelle instantanée encourage les utilisateurs à interagir davantage avec l'application. La réduction des délais perçus conduit à une expérience plus engageante et agréable.
- Frustration de l'utilisateur réduite : Attendre les réponses du serveur peut être frustrant pour les utilisateurs, en particulier dans des situations de connexions réseau lentes ou peu fiables. Les mises à jour optimistes minimisent les temps d'attente perçus et réduisent la frustration de l'utilisateur.
Présentation du hook useOptimistic de React
Le hook useOptimistic simplifie l'implémentation des mises à jour d'UI optimistes dans les applications React. Il offre un moyen de gérer un état local qui est mis à jour de manière optimiste avant la réponse du serveur et qui peut être annulé si la requête serveur échoue.
Signature du hook :
const [optimisticState, addOptimistic] = useOptimistic(initialState, updateFn);
initialState :La valeur initiale de l'état. C'est la valeur que l'état conserve avant l'application de toute mise à jour optimiste.updateFn :(Facultatif) Une fonction qui prend l'état actuel et la valeur passée àaddOptimistic, et renvoie le nouvel état optimiste. Si aucune fonction n'est passée, la valeur passée à `addOptimistic` écrasera la valeur actuelle de l'état.optimisticState :La valeur actuelle de l'état optimiste. C'est l'état qui doit être utilisé pour le rendu de l'UI.addOptimistic :Une fonction qui accepte une valeur et déclenche une mise à jour optimiste, en utilisant `updateFn` si elle est fournie.
Exemples pratiques de useOptimistic
Exemple 1 : Aimer une publication (Réseaux sociaux)
Revenons à l'exemple du bouton "J'aime" des réseaux sociaux. Nous utiliserons useOptimistic pour mettre à jour le nombre de "J'aime" immédiatement lorsque l'utilisateur clique sur le bouton.
import React, { useState, useOptimistic } from 'react';
function LikeButton({ postId, initialLikes }) {
const [isLiked, setIsLiked] = useState(false);
const [optimisticLikes, addOptimistic] = useOptimistic(
initialLikes,
(state, newLike) => (newLike ? state + 1 : state - 1) //updateFn incrémente ou décrémente
);
const handleClick = async () => {
const optimisticValue = !isLiked;
setIsLiked(optimisticValue); // Mettre à jour l'état local 'isLiked'
addOptimistic(optimisticValue); // Incrémenter ou décrémenter optimisticLikes
try {
// Simuler un appel API pour aimer/ne plus aimer la publication
await new Promise((resolve) => setTimeout(resolve, 500)); // Simuler la latence du réseau
// Mettre à jour l'état du serveur ici (par ex., avec fetch ou Axios)
// await api.likePost(postId, isLiked);
} catch (error) {
console.error("Erreur lors de l'ajout du J'aime :", error);
// Annuler la mise à jour optimiste si la requête échoue
setIsLiked(!optimisticValue);
addOptimistic(!optimisticValue);
}
};
return (
);
}
export default LikeButton;
Explication :
- Nous initialisons l'état
optimisticLikesavec le nombre initial de "J'aime" en utilisantuseOptimistic(initialLikes). - Lorsque le bouton est cliqué, nous appelons
addOptimistic()pour incrémenter immédiatement le compteur de "J'aime". - Nous simulons ensuite un appel API pour mettre à jour le serveur.
- Si l'appel API échoue, nous annulons la mise à jour optimiste en appelant à nouveau
addOptimistic()avec la valeur opposée.
Exemple 2 : Ajouter un commentaire (Article de blog)
Considérons un autre scénario : l'ajout d'un commentaire à un article de blog. Nous voulons que le commentaire apparaisse immédiatement sans attendre que le serveur confirme sa création.
import React, { useState, useOptimistic } from 'react';
function CommentForm({ postId }) {
const [commentText, setCommentText] = useState('');
const [optimisticComments, addOptimistic] = useOptimistic([]);
const handleSubmit = async (e) => {
e.preventDefault();
if (!commentText.trim()) return;
const newComment = {
id: Date.now(), // Générer un ID temporaire
text: commentText,
author: 'User',
timestamp: new Date().toISOString(),
};
addOptimistic(prevComments => [...prevComments, newComment]);
setCommentText('');
try {
// Simuler un appel API pour créer le commentaire
await new Promise((resolve) => setTimeout(resolve, 500)); // Simuler la latence du réseau
// Ici, vous feriez l'appel API, par ex. api.addComment(postId, newComment);
// En supposant que l'appel API renvoie le commentaire avec un ID attribué par le serveur, vous mettriez à jour l'ID du commentaire
} catch (error) {
console.error("Erreur lors de l'ajout du commentaire :", error);
// Annuler la mise à jour optimiste si la requête échoue
addOptimistic(prevComments => prevComments.filter(c => c.id !== newComment.id));
}
};
return (