Échapper au piège : corriger les fermetures obsolètes dans les React Hooks
Les fermetures obsolètes (stale closures) provoquent des pertes de données silencieuses dans React.
Vous construisez un tableau de bord avec un minuteur en arrière-plan. Vous utilisez setInterval à l'intérieur d'un hook useEffect pour sauvegarder automatiquement les données toutes les 5 secondes.
Le bug se produit lorsque l'intervalle se déclenche. Il sauvegarde un document vide même si l'utilisateur a tapé une page entière. L'intervalle reste bloqué dans le passé. Il utilise une ancienne version de votre état (state).
Le Problème
Lorsque useEffect s'exécute, il capture les variables présentes dans son scope.
- Si vous omettez l'état (state) du tableau de dépendances, l'intervalle utilisera l'état du premier rendu.
- Si vous ajoutez l'état au tableau de dépendances, React redémarre l'intervalle à chaque frappe de touche. Cela nuit aux performances et casse votre synchronisation.
La Solution : Le pattern Mutable Ref
Vous devez séparer le minuteur des données. Utilisez le hook useRef pour conserver une référence constante à votre état le plus récent. Cela évite les re-rendus et maintient la stabilité de votre intervalle.
Comment l'implémenter :
- Créez une ref pour stocker votre état le plus récent.
- Utilisez un
useEffectpour mettre à jour cette ref chaque fois que votre état change. - Démarrez 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 votre intervalle.
Cette méthode garantit que vos tâches en arrière-plan utilisent toujours des données fraîches. Elle permet de garder une interface utilisateur rapide et des données sécurisées.
Source : https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7