useOptimistic |
Utilise l'optimisation |
| React |
Syntaxe
|
const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);
|
useOptimistic est un crochet React vous permettant de mettre à jour l'interface utilisateur de manière optimiste.
Référence
|
useOptimistic(state, updateFn)
|
useOptimistic est un crochet React permettant d'afficher un état différent pendant l'exécution d'une action désynchronisée. Il accepte un état en
paramètre et renvoie une copie de cet état, qui peut être différent pendant la durée d'une action désynchronisée, telle qu'une requête réseau. Vous fournissez une fonction qui prend
l'état actuel et les données d'entrée de l'action, et renvoie l'état optimiste à utiliser pendant l'exécution de l'action.
Cet état est appelé «optimiste» car il est généralement utilisé pour présenter immédiatement à l'utilisateur le résultat de l'exécution d'une
action, même si celle-ci prend du temps.
- import { useOptimistic } from 'react';
-
- function AppContainer() {
- const [optimisticState, addOptimistic] = useOptimistic(
- state,
- // updateFn
- (currentState, optimisticValue) => {
- // fusionner et renvoyer un nouvel état avec une valeur optimiste
- }
- );
- }
Paramètres
| Nom |
Description |
| state |
la valeur à renvoyer initialement et lorsqu'aucune action n'est en attente. |
| updateFn(currentState, optimisticValue) |
Une fonction prenant l'état actuel et la valeur optimiste passée à addOptimistic et renvoie l'état optimiste résultant. Il doit s'agir d'une fonction pure. updateFn prend deux paramètres : currentState et optimisticValue. La valeur de retour sera la valeur fusionnée de currentState et optimisticValue. |
Valeurs renvoyées
| Nom |
Description |
| optimisticState |
L'état optimiste résultant. Il est égal à state, sauf si une action est en attente, auquel cas il est égal à la valeur renvoyée par updateFn. |
| addOptimistic |
addOptimistic est la fonction de répartition à appeler en cas de mise à jour optimiste. Elle prend un argument, optimisticValue, de n'importe quel type, et appelle updateFn avec state et optimisticValue. |
Utilisation
- Mise à jour optimiste des formulaires
- Le crochet useOptimistic permet de mettre à jour l'interface utilisateur de manière optimiste avant la fin d'une opération en arrière-plan, comme une requête réseau. Dans le contexte des formulaires, cette technique permet de rendre les applications plus réactives. Lorsqu'un utilisateur soumet un formulaire, au lieu d'attendre la réponse du serveur pour refléter les modifications, l'interface est immédiatement mise à jour avec le résultat attendu.
Par exemple, lorsqu'un utilisateur saisit un message dans le formulaire et clique sur le bouton «Envoyer», le crochet useOptimistic permet
au message d'apparaître immédiatement dans la liste avec l'étiquette «Envoi...», avant même son envoi au serveur. Cette approche «optimiste» donne une impression de rapidité et
de réactivité. Le formulaire tente ensuite d'envoyer le message en arrière-plan. Une fois que le serveur confirme la réception du message, l'étiquette «Envoi...» disparaît.
Dernière mise à jour : Mercredi, le 10 septembre 2025
