Lazy state initialization
Problématique
À chaque fois que le composant est mis à jour, la fonction dans useState est appelée. La majorité du temps, cette particularité ne cause pas de problème. Cependant, si la fonction est complexe ou demande un certain temps afin d'être complétée, des enjeux de performance peuvent survenir.
Par exemple, ouvrez en pleine page l'exemple ci-dessous 👇 en cliquant sur l'onglet Edit on CodePen et remarquez dans la console comment le message ⚙️⚙️⚙️ est appelé à chaque fois que vous modifier le nom de l'étiquette:
Cliquez sur le nom de l’étiquette et tapez un nouveau nom.
Un appel au localStorage est fait à chaque fois, malgré qu'il ne soit nécessaire qu'au chargement uniquement.
Solution
Le fait de déplacer l'appel de localStorage dans une fonction fléchée anonyme produit le même résultat que l'exemple précédent ou presque. La différence se situe dans le résultat de cette fonction qui est cachée et disponible les fois subséquentes sans avoir a être réexécutée.
Ouvrez à nouveau en pleine page cet exemple 👇 en cliquant sur l'onglet Edit on CodePen et remarquez dans la console comment le message ⚙️⚙️⚙️ n'est appelé que la première fois que vous modifier le nom de l'étiquette et non les fois subséquentes, limitant ainsi les appels plus demandants au localStorage: