Implémenter le hook personnalisé useThrottle

La temporisation différée réinitialise simplement un minuteur à chaque événement. La limitation de fréquence doit suivre activement le moment de la dernière exécution et déterminer si suffisamment de temps s’est écoulé avant d’en autoriser une autre. Cela nécessite de conserver un horodatage entre les rendus, ce qui rend l’implémentation légèrement plus complexe que celle de la temporisation différée.

L’horodatage de la dernière exécution doit persister entre les rendus sans provoquer lui-même de nouveaux rendus, ce qui fait de useRef l’outil approprié. Stockez l’horodatage avec const lastRunTime = useRef(Date.now()). Contrairement à l’état, la mise à jour d’une référence ne provoque pas de nouveau rendu ; la logique de limitation de fréquence s’exécute donc efficacement, sans cycles supplémentaires.

Le crochet useThrottle(value, delay) renvoie une version limitée de la fréquence de mise à jour de la valeur d’entrée. Son contrat est similaire à celui de useDebounce : accepter n’importe quelle valeur et un délai en millisecondes, puis renvoyer la valeur limitée. Les composants l’utilisent de la même manière, ce qui en fait une solution de remplacement directe pour d’autres sémantiques temporelles.

Un limiteur de fréquence en fin d’intervalle met à jour la valeur à la fin de chaque intervalle. Lorsqu’une nouvelle valeur arrive, planifiez un setTimeout pour la durée restante de l’intervalle : delay - (Date.now() - lastRunTime.current). Lorsque le minuteur se déclenche, mettez à jour l’état et enregistrez le nouveau lastRunTime. Annulez les minuteurs précédents lors du nettoyage.

Un limiteur de fréquence en début d’intervalle applique immédiatement la première valeur et ignore les suivantes jusqu’à l’expiration de l’intervalle. Vérifiez que si Date.now() - lastRunTime.current >= delay, vous mettez à jour l’état et enregistrez l’instant. Sinon, ignorez la mise à jour. Cela fournit un retour instantané lors de la première action, suivi d’une période d’attente.

La meilleure expérience utilisateur combine souvent les deux approches : répondez immédiatement au premier événement (début), puis veillez à ce que l’état final soit également appliqué après l’intervalle (fin). L’utilisateur bénéficie ainsi d’une réponse initiale rapide, et la valeur finale est toujours appliquée une fois le mouvement terminé, ce qui évite un état final obsolète.

Stockez l’ID du délai en attente dans un useRef : const timeoutRef = useRef(null). Avant de planifier un nouveau délai, appelez clearTimeout(timeoutRef.current) pour annuler celui qui existe déjà. Cela évite plusieurs minuteurs qui se chevauchent, lesquels entraîneraient plusieurs mises à jour au cours d’un même intervalle de limitation.

Le nettoyage de useEffect doit appeler clearTimeout(timeoutRef.current) pour annuler toute mise à jour en fin d’intervalle en attente lorsque le composant est démonté. Sinon, un délai en attente se déclenche après le démontage et tente de définir l’état d’un composant démonté, ce qui peut provoquer des avertissements de React.

Au lieu d’une fonction de limitation basée sur une valeur, vous pouvez créer une fonction de limitation basée sur useCallback : useThrottledCallback(fn, delay) renvoie une version limitée d’une fonction. Cette approche est plus flexible lorsque l’opération à limiter est un appel de fonction, par exemple un outil de suivi analytique, plutôt qu’une valeur réactive.

Dans les tests Jest, utilisez jest.useFakeTimers() pour contrôler le temps. Configurez une limitation avec un délai de 1000 ms, déclenchez 10 changements rapides de valeur, puis avancez le temps simulé de 500 ms et vérifiez qu’une ou deux mises à jour seulement ont eu lieu. Avancez encore de 500 ms et vérifiez que la mise à jour en fin d’intervalle se déclenche. Cela valide de manière déterministe le comportement de la limitation.

React traite les mises à jour d’état par lots pendant les rendus. Une limitation appliquée aux mises à jour d’état s’intègre proprement à ce modèle. Toutefois, notez que, dans le mode concurrent de React 18, les rendus peuvent être interrompus. La logique de limitation elle-même, fondée sur le temps réel de l’horloge via Date.now(), n’est pas affectée par la planification de React.

Sur quelle extrémité un limiteur en fin d’intervalle se déclenche-t-il ?

La limitation nécessite de suivre le dernier instant d’exécution avec useRef. La fonction peut implémenter le début d’intervalle, immédiat, la fin d’intervalle, différée, ou les deux. Stockez toujours l’ID du délai dans une référence et annulez-le lors du nettoyage. Pour les cas d’utilisation fondés sur des fonctions, préférez un modèle useThrottledCallback. Effectuez des tests avec des minuteurs simulés pour garantir la fiabilité.