𝗙𝗶𝘅 𝗦𝘁𝗮𝗹𝗲 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀 -> Résoudre les stale closures dans les React Hooks
Vous créez un minuteur dans un hook useEffect de React. Vous voulez sauvegarder automatiquement un document toutes les cinq secondes. Le minuteur s'exécute, mais il sauvegarde un document vide. L'utilisateur a tapé dix paragraphes, mais le minuteur ne voit rien.
C'est une stale closure.
Le hook useEffect capture les variables lors du premier rendu. Si vous omettez l'état du tableau de dépendances, le minuteur reste bloqué dans le passé. Il utilise une ancienne version de vos données.
Si vous ajoutez l'état au tableau de dépendances, le minuteur se réinitialise à chaque fois que l'utilisateur tape un caractère. Cela nuit aux performances et casse votre logique de temporisation.
Vous pouvez résoudre cela avec le Mutable Ref Pattern.
Utilisez le hook useRef pour conserver votre état le plus récent. Cela permet à votre minuteur d'accéder à des données fraîches sans déclencher de nouveaux rendus ni réinitialiser l'intervalle.
Suivez ces étapes :
- Créez une ref pour conserver votre état.
- Utilisez un
useEffectpour synchroniser la ref avec votre état. - Configurez votre intervalle avec un tableau de dépendances vide pour qu'il ne s'exécute qu'une seule fois.
- Accédez à la ref à l'intérieur du callback de l'intervalle.
Cette approche découple votre minuteur de vos données. Vos tâches de fond restent stables. Vos données restent exactes.
Arrêtez de perdre les données de vos utilisateurs à cause de bugs silencieux. Utilisez des refs pour maintenir vos tâches asynchrones en synchronisation avec votre UI.
Source : https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7