useDeferredValue |
Utilise la valeur différé |
|---|---|
| React | |
Syntaxe
| const deferredValue = useDeferredValue(value) |
useDeferredValue est un crochet React vous permettant de différer la mise à jour d'une partie de l'interface utilisateur.
Référence
| useDeferredValue(value, initialValue?) |
Utilisation
- Affichage d'un contenu obsolète pendant le chargement d'un nouveau contenu
- Indication d'un contenu obsolète
- Report du rendu d'une partie de l'interface utilisateur
Référence
| useDeferredValue(value, initialValue?) |
Appelez useDeferredValue au niveau supérieur de votre composante pour obtenir une version différée de cette valeur.
- import { useState, useDeferredValue } from 'react';
-
- function SearchPage() {
- const [query, setQuery] = useState('');
- const deferredQuery = useDeferredValue(query);
- // ...
- }
Paramètres
| Nom | Description |
|---|---|
| value | La valeur à différer. Elle peut être de n'importe quel type. |
| initialValue | (facultatif) une valeur à utiliser lors du rendu initial d'une composante. Si cette option est omise, useDeferredValue ne différera pas lors du rendu initial, car il n'existe aucune version antérieure de value à afficher à la place. |
Retour
currentValue : Lors du rendu initial, la valeur différée renvoyée sera la valeur initiale, ou la même que celle que vous avez fournie. Lors des mises à jour, React tentera d'abord un nouveau rendu avec l'ancienne valeur (il renverra donc l'ancienne valeur), puis un autre rendu en arrière-plan avec la nouvelle valeur (il renverra donc la valeur mise à jour).
Mises en garde
Lorsqu'une mise à jour est effectuée dans une transition, useDeferredValue renvoie toujours la nouvelle valeur et ne génère pas de rendu différé, car la mise à jour est déjà différée.
Les valeurs transmises à useDeferredValue doivent être des valeurs primitives (comme des chaînes et des nombres) ou des objets créés hors du rendu. Si vous créez un nouvel objet pendant le rendu et le transmettez immédiatement à useDeferredValue, il sera différent à chaque rendu, ce qui entraînera des rendus en arrière-plan inutiles.
Lorsque useDeferredValue reçoit une valeur différente (par rapport à Object.is), en plus du rendu actuel (lorsqu'il utilise toujours la valeur précédente), il planifie un rendu en arrière-plan avec la nouvelle valeur. Le rendu en arrière-plan est interruptible : si une nouvelle mise à jour de la valeur est effectuée, React relancera le rendu en arrière-plan depuis le début. Par exemple, si l'utilisateur saisit une entrée plus rapidement que le graphique recevant sa valeur différée ne peut la restituer, le graphique ne s'affichera à nouveau qu'après l'arrêt de la saisie.
useDeferredValue est intégré à <Suspense>. Si la mise à jour en arrière-plan provoquée par une nouvelle valeur suspend l'interface utilisateur, l'utilisateur ne verra pas la solution de secours. Il verra l'ancienne valeur différée jusqu'au chargement des données.
useDeferredValue n'empêche pas à elle seule les requêtes réseau supplémentaires.
useDeferredValue n'entraîne aucun délai fixe. Dès que React termine le recalcul initial, il commence immédiatement le recalcul en arrière-plan avec la nouvelle valeur différée. Toute mise à jour provoquée par des événements (comme la saisie) interrompt le recalcul en arrière-plan et est prioritaire.
Le recalcul en arrière-plan provoqué par useDeferredValue ne déclenche pas d'effets tant qu'il n'est pas appliqué à l'écran. Si le rendu en arrière-plan est suspendu, ses effets s'exécuteront après le chargement des données et les mises à jour de l'interface utilisateur.
Utilisation
- Affichage du contenu obsolète pendant le chargement du nouveau contenu
- Appelez useDeferredValue au niveau supérieur de votre composante pour différer la mise à jour d'une partie de votre interface utilisateur.
- import { useState, useDeferredValue } from 'react';
-
- function SearchPage() {
- const [query, setQuery] = useState('');
- const deferredQuery = useDeferredValue(query);
- // ...
- }
Lors du rendu initial, la valeur différée sera identique à celle que vous avez fournie.
Lors des mises à jour, la valeur différée sera «en retard» par rapport à la dernière valeur. React effectuera d'abord un nouveau rendu sans mettre à jour la valeur différée, puis tentera de restituer la valeur reçue en arrière-plan.
Examinons un exemple pour comprendre l'utilité de cette méthode.
Remarque : Cet exemple suppose que vous utilisez une source de données compatible Suspense :
- Récupération de données avec des cadres d'applications compatibles Suspense comme Relay et Next.js
- Chargement différé du code d'une composante avec lazy
- Lecture de la valeur d'une promesse avec use
- En savoir plus sur Suspense et ses limites.
Dans cet exemple, la composante SearchResults s'interrompt pendant la récupération des résultats de recherche. Essayez de saisir «a», d'attendre les résultats, puis de le modifier en «ab». Les résultats de «a» sont remplacés par la méthode de chargement de secours.