Refactorisation d'un système de synchronisation temps réel instable
Scénario
Contexte : Vous reprenez une application React connectée à un WebSocket interne pour afficher en temps réel des transactions financières. Le Problème : À chaque mise à jour, plusieurs connexions WebSocket sont ouvertes, provoquant des fuites mémoire et des doublons dans l'affichage. Contraintes : Vous devez corriger la gestion du cycle de vie sans ajouter de librairie externe. L'utilisation de useEffect et useRef est autorisée. La connexion doit être proprement fermée lors du démontage. Code actuel : function LiveFeed() { const [messages, setMessages] = React.useState([]); React.useEffect(() => { const socket = new WebSocket("wss://example.com/feed"); socket.onmessage = (event) => { setMessages(prev => [...prev, event.data]); }; }); return ( <ul> {messages.map((msg, i) => ( <li key={i}>{msg}</li> ))} </ul> ); } Livrable attendu : Stabiliser la connexion WebSocket pour qu'elle ne soit ouverte qu'une seule fois et correctement nettoyée.