Stabilisation d'un fetch API déclenché en boucle infinie
Scénario
Contexte : Vous reprenez un module React chargé d'afficher une liste d'utilisateurs provenant d'une API interne utilisée par l'équipe commerciale. Le Problème : À chaque mise à jour des données, le composant relance automatiquement un nouvel appel API, provoquant une boucle infinie de requêtes et une surcharge du backend. Contraintes : Vous devez conserver l'utilisation de useState et useEffect. Aucune librairie externe n'est autorisée. Le comportement doit rester asynchrone et compatible avec React 18. Code actuel : function Users() { const [users, setUsers] = React.useState([]); React.useEffect(() => { fetch("/api/users") .then(res => res.json()) .then(data => setUsers(data)); }, [users]); return ( <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); } Livrable attendu : Corriger la dépendance du useEffect afin d'éviter les appels répétés tout en garantissant un chargement initial correct.