Applications pratiques : recherche, défilement, redimensionnement

Dans un composant de recherche en direct, gérez deux variables d’état distinctes : inputValue pour la saisie brute (elle se met à jour à chaque frappe et maintient le champ de saisie réactif) et debouncedQuery, obtenu avec useDebounce(inputValue, 300) (il se met à jour 300 ms après l’arrêt de la saisie et déclenche l’appel à l’API). Cette séparation fournit un retour visuel instantané sans multiplier les requêtes.

Affichez un indicateur de chargement dès que l’utilisateur commence à saisir du texte, et pas uniquement lorsque l’appel à l’API commence. Définissez isLoading: true chaque fois que inputValue !== debouncedQuery : ces valeurs ne sont pas synchronisées pendant l’attente de la temporisation. Une fois la requête stabilisée et la récupération terminée, redéfinissez-le sur false. Les utilisateurs voient ainsi un indicateur de chargement réactif pendant toute l’opération.

Un effet de parallaxe ou une barre de progression de lecture se met à jour en fonction de la position de défilement. Limitez la fréquence du gestionnaire de défilement à 60 images par seconde au maximum, avec un délai de 16 ms : const throttledScrollY = useThrottle(scrollY, 16). L’interface se met à jour fluidement sans le coût d’un recalcul de la position à chaque pixel de défilement.

L’écoute du redimensionnement de la fenêtre pour recalculer la mise en page doit être temporisée, et non limitée en fréquence. Le calcul de la mise en page doit uniquement s’exécuter une fois que l’utilisateur a terminé de redimensionner la fenêtre. Utilisez une temporisation de 200 ms sur les dimensions de la fenêtre. Pendant le redimensionnement par glissement, l’interface peut afficher un état simplifié ; la mise en page recalculée apparaît lorsque le redimensionnement s’arrête.

Lorsque debouncedQuery change, créez un nouvel AbortController et transmettez son signal à fetch(url, { signal }). Renvoyez une fonction de nettoyage qui appelle controller.abort(). Cela annule toute requête en cours provenant d’une requête précédente lorsqu’une nouvelle requête temporisée arrive, empêchant les conditions de concurrence dans lesquelles une réponse antérieure plus lente écraserait une réponse ultérieure plus rapide.

Sans AbortController, si l’utilisateur saisit « re », attend, puis saisit « react », la seconde requête peut retourner un résultat avant la première (en raison de la mise en cache). Les résultats de recherche afficheraient brièvement les résultats pour React, puis seraient remplacés par les résultats obsolètes pour « re ». AbortController évite cela en annulant entièrement la requête précédente.

La liste déroulante combine la temporisation pour les appels à l’API et un état immédiat pour l’affichage de la saisie. inputValue contrôle ce qui apparaît dans le champ de texte. useDebounce(inputValue, 250) contrôle le moment où la récupération des suggestions est déclenchée. La liste de suggestions est affichée à partir de l’état des résultats récupérés, qui est distinct des deux états de saisie.

La validation asynchrone d’un formulaire, par exemple pour vérifier si une adresse e-mail existe déjà, doit être temporisée afin d’éviter de solliciter le serveur à chaque frappe. Utilisez une temporisation de 400 ms sur la valeur du champ et déclenchez la requête de validation dans un useEffect qui dépend de la valeur temporisée. Affichez un indicateur de chargement dans le champ pendant l’attente de la validation.

La temporisation est idéale pour enregistrer automatiquement le contenu d’un formulaire pendant que l’utilisateur saisit du texte. Appliquez une temporisation de 1000 ms à l’objet contenant les valeurs du formulaire. Lorsque la valeur temporisée change, déclenchez un enregistrement vers localStorage ou un point de terminaison d’API. L’utilisateur voit l’indication « Enregistrement… » pendant l’attente de la temporisation, puis « Enregistré » une fois la requête terminée.

Les valeurs de délai relèvent de l’expérience utilisateur. Pour la recherche, 200 à 300 ms offrent un bon équilibre entre réactivité et réduction du nombre de requêtes. Pour le redimensionnement, 150 à 200 ms sont acceptables, car les utilisateurs s’attendent à ce que la mise en page se stabilise après le redimensionnement. Ajustez ces valeurs en fonction de la vitesse d’interaction prévue.

Les applications réelles nécessitent souvent plusieurs optimisations simultanément. Un éditeur de documents peut temporiser l’enregistrement automatique (1 s), limiter la fréquence du calcul du nombre de mots (500 ms) et utiliser IntersectionObserver pour l’analyse. Ces techniques se combinent bien, car chacune fonctionne indépendamment avec son propre minuteur et sa propre portée.

Utilisez useDebounce pour les champs de recherche, les gestionnaires de redimensionnement et l’enregistrement automatique des formulaires. Utilisez useThrottle pour le défilement et les mouvements de la souris. Combinez toujours les appels d’API temporisés avec AbortController pour éviter les conditions de concurrence. Affichez l’état de chargement chaque fois que inputValue !== debouncedQuery afin de maintenir une interface réactive et informative.