Correction d'une liste dynamique qui ne se met pas à jour
Scénario
Contexte : Vous intervenez sur une application interne permettant d'afficher une liste de tâches saisies par les collaborateurs. Le Problème : Lorsqu'une nouvelle tâche est ajoutée, l'interface ne se met pas toujours à jour correctement et certaines tâches disparaissent. Contraintes : Vous devez corriger le composant sans modifier son architecture globale. Aucune librairie externe n'est autorisée. Utilisation exclusive des hooks React. Code actuel : function TaskList() { const [tasks, setTasks] = React.useState([]); const addTask = () => { tasks.push("Nouvelle tâche"); setTasks(tasks); }; return ( <div> <button onClick={addTask}>Ajouter</button> <ul> {tasks.map((t, i) => ( <li key={i}>{t}</li> ))} </ul> </div> ); } Livrable attendu : Corriger la gestion du state pour que chaque ajout déclenche correctement un nouveau rendu sans effets de bord.