Le hook useState de React est un outil essentiel pour gérer l'état des composants fonctionnels, mais il est facile de tomber sur certains pièges courants. Que vous débutiez avec React ou que vous travailliez avec React depuis un certain temps, éviter ces erreurs peut vous éviter des bugs inattendus et des problèmes de performances.

Passons en revue 10 erreurs fréquentes et comment vous pouvez les éviter pour écrire un code plus propre et plus efficace.

1. Mauvais type d’état initial

L'un des problèmes les plus courants survient lorsque le type d'état initial ne correspond pas au type attendu lors des mises à jour d'état.

❌ Erreur : incompatibilité de type d'état initial

const [count, setCount] = useState(0);
setCount("1"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

✅ Solution : utilisez TypeScript ou spécifiez le type explicitement.

const [count, setCount] = useState(0);
setCount(1); // No issues now.

2. Ne pas utiliser les mises à jour fonctionnelles

Lors de la mise à jour de l'état en fonction de la valeur précédente, la référence directe à l'état actuel peut conduire à des valeurs obsolètes, en particulier dans les opérations asynchrones.

❌ Erreur : utiliser directement l'état actuel

setCount(count   1); // Can cause bugs in async scenarios.

✅ Solution : utilisez le formulaire fonctionnel pour des mises à jour sécurisées.

setCount((prevCount) => prevCount   1); // Ensures you always have the latest value.

3. Stockage de l'état dérivé

Évitez de stocker des valeurs dans un état qui peut être dérivé d'un autre état ou d'autres accessoires. Cela peut entraîner des rendus inutiles et des problèmes de synchronisation.

❌ Erreur : stockage de l'état dérivé

const [count, setCount] = useState(0);
const [doubleCount, setDoubleCount] = useState(count * 2);

✅ Solution : dérivez la valeur pendant le rendu au lieu d'utiliser l'état.

const [count, setCount] = useState(0);
const doubleCount = count * 2; // No need to store this in state.

4. Mises à jour de l'état pendant la phase de rendu

Appeler setState dans la phase de rendu est une recette pour des boucles infinies et des problèmes de performances.

❌ Erreur : définition de l'état pendant le rendu

const [count, setCount] = useState(0);
setCount(1); // Infinite loop!

✅ Solution : Déclenchez des changements d'état dans les gestionnaires d'événements ou les effets.

const handleClick = () => setCount(1);

5. État en mutation directe

React ne détectera pas les changements si vous modifiez directement l'état, en particulier avec des tableaux ou des objets.

❌ Erreur : mutation directe de l'état

const [items, setItems] = useState([1, 2, 3]);
items.push(4); // Mutation happens here, React won’t re-render!

✅ Solution : renvoie un nouveau tableau ou objet pour déclencher de nouveaux rendus.

setItems((prevItems) => [...prevItems, 4]); // Spread to create a new array.

6. Types non définis ou incorrects pour un état complexe

Lorsqu'il s'agit d'un état complexe, ne pas définir les types appropriés peut entraîner des problèmes d'exécution et de la confusion.

❌ Erreur : les types implicites peuvent conduire à des erreurs

const [user, setUser] = useState({ name: "", age: 0 });
setUser({ name: "John", age: "thirty" }); // Type error: Age should be a number.

✅ Solution : Définir la forme de l'état avec les types corrects.

type User = { name: string; age: number };
const [user, setUser] = useState({ name: "", age: 0 });

7. Utilisation de l'état pour les valeurs mutables (comme les minuteries)

L'utilisation de useState pour des valeurs qui n'affectent pas le rendu, telles que les minuteries, entraîne des rendus inutiles.

❌ Erreur : utiliser l'état pour des valeurs mutables

const [timerId, setTimerId] = useState(null);

✅ Solution : utilisez useRef pour les valeurs mutables qui n'ont pas besoin d'être restituées.

const timerIdRef = useRef(null);

8. Ne pas fusionner correctement les objets d'état

Contrairement aux composants de classe, useState ne fusionne pas automatiquement les mises à jour. Oublier cela peut entraîner l'écrasement de parties de votre état.

❌ Erreur : écraser l'état au lieu de fusionner

const [user, setUser] = useState({ name: '', age: 0 });
setUser({ age: 25 }); // The 'name' field is now lost!

✅ Solution : utilisez l'opérateur de propagation pour fusionner les mises à jour d'état.

setUser((prevUser) => ({ ...prevUser, age: 25 })); // Merges with existing state.

9. Utilisation de State pour les mises à jour haute fréquence

Le suivi des valeurs à haute fréquence telles que les dimensions de la fenêtre dans l'état peut entraîner des problèmes de performances en raison de nouveaux rendus excessifs.

❌ Erreur : utiliser l'état pour des mises à jour fréquentes

const [size, setSize] = useState(window.innerWidth);
window.addEventListener("resize", () => setSize(window.innerWidth));

✅ Solution : utilisez useRef ou antibounce pour réduire les performances.

const sizeRef = useRef(window.innerWidth);
useEffect(() => {
  const handleResize = () => {
    sizeRef.current = window.innerWidth;
  };
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

10. En supposant que les mises à jour d'état soient synchrones

Les mises à jour de l'état de React sont asynchrones, mais de nombreux développeurs supposent à tort que les modifications sont appliquées immédiatement.

❌ Erreur : supposer que les changements d'état sont immédiats

setCount(count   1);
console.log(count); // Logs the old value, not the updated one!

✅ Solution : utilisez useEffect pour suivre les changements d'état et garantir que la dernière valeur est utilisée.

useEffect(() => {
  console.log(count); // Logs the updated value after re-render.
}, [count]);

Pensées finales ?

Éviter ces pièges de useState rendra votre code React plus robuste, lisible et performant. Comprendre le fonctionnement du mécanisme d'état de React et connaître les meilleures pratiques vous fera gagner du temps lors du débogage et améliorera votre expérience globale de développement.

Avez-vous des conseils ou des erreurs useState à partager ? Déposez-les dans les commentaires ci-dessous ! ?