Comment corriger l'erreur Can't perform a React state update on an unmounted component ?

Le framework JavaScript fonctionne avec un système de composants. Ces composants suivent un cycle de vie, qui est régi par des états. L'état "mounted" correspond à l'affichage du composant à l'écran. L'état "updated" indique qu'il a été mis à jour et, pour finir, l'état "unmounted" correspond au moment où le composant est supprimé. On ne peut pas interagir avec un composant supprimé. Si un changement d'état a lieu avec la fonction "setState()", alors le message d'erreur "Can't perform a React state update on an unmounted component" va s'afficher sur votre console.

Pour éviter ce message d'erreur, qui indique une fuite mémoire dans votre application, vous devez faire en sorte que la fonction "setState()" ne soit pas appelée lorsque le composant n'est pas démonté. React fournit un Hook permettant de gérer facilement ce problème, le Hook "UseEffect()". Ce "Hook" est appelé lors des changements dans le cycle de vie du composant. Vous pouvez déclarer un booléen dans ce Hook qui va indiquer que le composant est encore monté. Lancez ensuite votre opération de manière asynchrone et conditionnez le changement d'état avec le booléen. De cette manière, la fonction "setState()" ne sera utilisée que si le composant est bien en vie. La dernière étape consiste à indiquer quand le composant n'est plus en vie. Pour cela, on peut retourner une fonction dans le Hook "useEffect()". Cette fonction retournée ne sera exécutée que lorsque le composant aura été détruit, lors du nettoyage. Mettez ici le code qui indique que le composant n'est plus affiché.

useEffect(() => {
  let estAffiche = true, // Ce booléen va indiquer que le composant est affiché
  maFonctionAsynchrone().then(data => {
    if (estAffiche) setState(data),
  })
  return () => { estAffiche = false }, // Cette fonction sera utilisée lors du nettoyage du composant, on va indiquer qu'il n'est plus affiché
}),

JavaScript