Les anti-patterns de useState en React JS
Écrire un code React propre nécessite une gestion intelligente de l'état. De mauvais modèles d'état entraînent des bugs et un code complexe.
Évitez ces quatre erreurs courantes :
- Grouper les données liées
Ne créez pas de hooks d'état séparés pour des valeurs qui changent ensemble.
Au lieu de :
- const [x, setX] = useState(0);
- const [y, setY] = useState(0);
Utilisez un objet :
- const [position, setPosition] = useState({ x: 0, y: 0 });
Cela permet de garder vos mises à jour propres et organisées.
- Éviter les états conflictuels
Lorsque plusieurs booléens suivent le même processus, vous créez des bugs.
Au lieu d'avoir :
- isSubmitting
- isSubmit
Utilisez une seule chaîne de statut :
- status: 'TYPING'
- status: 'SUBMITTING'
- status: 'SUBMITTED'
Dérivez votre logique d'interface utilisateur à partir de cette source unique de vérité.
- Supprimer les états redondants
Si vous pouvez calculer une valeur pendant le rendu, ne la mettez pas dans l'état.
Ne stockez pas :
- firstName
- lastName
- fullName
Stockez simplement le prénom et le nom. Calculez le nom complet à la volée :
- const fullName = firstName + " " + lastName;
De plus, ne stockez jamais de props dans l'état. L'état ne s'initialise qu'une seule fois. Si votre prop change, l'état ne sera pas mis à jour. Utilisez la prop directement.
- Arrêter de dupliquer les données
Ne stockez pas les mêmes données dans deux états différents.
Si vous avez une liste de tâches et une tâche sélectionnée, ne stockez pas l'objet tâche complet aux deux endroits. Cela rend les mises à jour difficiles.
Au lieu de cela :
- Stockez la liste des tâches.
- Stockez uniquement le selectedTaskId.
- Recherchez la tâche dans la liste à l'aide de cet ID pendant le rendu.
Cela garantit que votre tâche sélectionnée correspond toujours aux données les plus récentes de votre liste.
Source : https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9