Les principales erreurs courantes dans le développement de React et comment les éviter ⚛️

Je développe des applications React depuis quelques années maintenant et j'ai vécu d'innombrables erreurs qui ralentissent le développement de vos projets.

React est l'une des bibliothèques les plus populaires pour créer des interfaces utilisateur dynamiques, mais sa flexibilité peut également conduire à certaines erreurs courantes pour les nouveaux développeurs.

Ce guide couvre les principales erreurs que les développeurs peuvent commettre dans React et fournit des conseils pratiques pour écrire un code meilleur et plus efficace.

Plongeons-nous !

1. État en mutation

Avant de continuer, écrivons d'abord notre composant React qui est censé afficher une liste d'éléments, ainsi qu'en ajouter ou en supprimer un :

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div>



<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>

<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

La première chose que fait cette méthode est d'appeler la fonction push array visant à ajouter un élément à un tableau.
La deuxième chose consiste à appeler setItems pour appliquer les modifications à la variable d'état.

Cependant, si vous essayez d'exécuter ce code, cela ne fonctionnera pas ❌

Ce code viole une règle React très importante : mutation de l'état.

React s'appuie sur l'identité d'une variable d'état pour savoir quand l'état a changé. Lorsque nous insérons un élément dans un tableau, nous ne modifions pas l'identité de ce tableau et React ne peut donc pas dire que la valeur a changé et restituer le tableau.

Voici comment y remédier ✅ :

function goodHandleAddItem(item) {
    if (item.length === 0)
        return;

    const newArray = [...items, item];

    setItems(newArray);
    setItemToAdd('');
}

Dans cette méthode, j'ai créé un nouveau tableau en utilisant l'opérateur spread... permettant d'instancier le nouveau tableau avec le contenu des éléments. Le deuxième paramètre permet d'ajouter le nouveau contenu (ici élément).

La dernière étape consiste à appeler la méthode setItems pour valider le nouvel état des éléments variables ✅

---

2. Ne pas générer de clé dans les listes

Chaque développeur React a probablement vu cette erreur au moins une fois au cours de son parcours de développement.

La manière la plus courante pour cela de se produire est lors du mappage sur des données. Voici un exemple de cette violation :

items.map((item) => (
    <div>
        {item}
        <button onClick={() => removeItem(item)}>-</button>
    </div>
))}

Lorsque nous voulons restituer un tableau d'éléments, nous devons donner à React un peu plus de contexte pour lui permettre d'identifier chaque élément. Dans le meilleur des mondes possible, il doit s'agir d'un identifiant unique.

Voici un moyen rapide de résoudre ce problème, mais ce n'est pas optimal :

items.map((item, index) => (
    <div key={index} >
        {item}
        <button onClick={() => removeItem(item)}>-</button>
    </div>
))}

Au fur et à mesure que vous acquerrez de l'expérience dans React et comprendrez mieux comment cela fonctionne, vous serez en mesure de dire si tout va bien ou non en fonction de votre cas.

Pour le rendre parfait, vous pouvez utiliser un générateur d'uuid tel que crypto.randomUUID() et le stocker dans votre liste d'articles en tant qu'objet comme suit :

const newItemToAdd = {
    id: crypto.randomUUID(),
    value: item
};
const newArray = [...items, newItemToAdd];
  setItems(newItems);

et utilisez-le comme suit pendant le rendu :

items.map((item, index) => (
    <div key={item.id} >
        {item.value}
        <button onClick={() => removeItem(item)}>-</button>
    </div>
))}

Maintenant, les choses sont parfaites ✅

---

3. Utilisation d'async dans useEffect

Supposons que nous ayons une fonction qui doit récupérer certaines données d'une API lors du montage. Nous utiliserons le hook useEffect et nous souhaitons utiliser le mot-clé wait.

Vérifions le premier essai :

Comme vous le savez peut-être, le mot-clé wait doit être dans une fonction marquée avec le mot-clé async :

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div>



<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>

<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

Malheureusement, cela ne fonctionne pas et nous obtenons ce message d'erreur :

function goodHandleAddItem(item) {
    if (item.length === 0)
        return;

    const newArray = [...items, item];

    setItems(newArray);
    setItemToAdd('');
}

Voici le correctif : créez une fonction asynchrone distincte dans le hook useEffect ✅

items.map((item) => (
    <div>
        {item}
        <button onClick={() => removeItem(item)}>-</button>
    </div>
))}

Il est important de comprendre ce qu'implique le mot-clé async :
Il ne renvoie pas l'objet json, il renvoie une promesse qui résout l'objet json.

C'est en fait un problème, car useEffect n'est pas censé renvoyer une promesse. Il s'attend à ce que nous ne renvoyions rien (comme nous le sommes ci-dessus) ou une fonction de nettoyage. Les fonctions de nettoyage sont importantes, elles sortent du cadre de ce guide, mais voici comment les utiliser :

items.map((item, index) => (
    <div key={index} >
        {item}
        <button onClick={() => removeItem(item)}>-</button>
    </div>
))}

---

4. Accès à l'état avant le nouveau rendu

Revenons à la gestion de l'état pour une autre erreur intéressante que les nouveaux développeurs commettent très souvent. Cela nous aidera à mieux comprendre l'état de React.

Prenons notre méthode goodHandleAddItem pour illustrer ceci :

const newItemToAdd = {
    id: crypto.randomUUID(),
    value: item
};
const newArray = [...items, newItemToAdd];
  setItems(newItems);

Lors de l'exécution de ce code, nous pouvons voir que la console n'enregistre pas le résultat attendu.

Voici le problème : la fonction setter d'une variable d'état est asynchrone.

Lorsque nous appelons la méthode setItems, nous planifions une mise à jour et n'attribuons pas de variable.

Voici le correctif : nous savons déjà quel doit être le contenu de la variable avec la variable newArray. Ce qui signifie que pour utiliser les données que nous voulons censées être le contenu de la variable items, nous devons utiliser la variable newArray à la place, même après setItems ✅

---

5. Utilisation de données d'état obsolètes

Le dernier portera également sur la gestion des états React, vous deviendrez un pro après ce guide ! ?

Un piège courant lors de l'utilisation de React Hooks est l'utilisation abusive de données d'état obsolètes. Cela peut se produire lorsque nous référençons directement la variable d'état dans des mises à jour d'état consécutives. Comme nous l'avons vu dans l'erreur précédente, les mises à jour d'état peuvent être asynchrones, cela signifie que la variable d'état peut ne pas refléter la dernière valeur lorsqu'elle est référencée lors d'appels successifs.

Prenons un tout nouvel exemple pour clarifier les choses, le fameux compteur :

items.map((item, index) => (
    <div key={item.id} >
        {item.value}
        <button onClick={() => removeItem(item)}>-</button>
    </div>
))}

L'utilisation ci-dessus est incorrecte. En fait, count est référencé directement dans l’appel setCount. Dans les gestionnaires d'événements et les méthodes de cycle de vie, les mises à jour d'état peuvent être par lots et utiliseront toutes deux la même valeur initiale que le nombre, ce qui entraînera un état final incorrect.

Il existe une autre forme de setCount que nous pouvons utiliser pour faire fonctionner les choses : la fonction de mise à jour. La fonction de mise à jour prend l'état précédent comme argument et renvoie le nouvel état, de sorte que chaque mise à jour consécutive aura la valeur correcte, évitant ainsi les comportements indésirables.

Voici comment l'utiliser :

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div>



<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>

<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

L'enregistrement du contenu du décompte indique désormais la valeur correcte ✅

---

Conclusion

Éviter ces erreurs courantes vous permettra de développer des applications React plus performantes et de maîtriser la gestion des états !

J'espère que ce guide vous a aidé et vous souhaite un bon moment de codage !

Laissez un like si vous avez apprécié ce guide, en tant que développeur React nouveau ou confirmé ?

A bientôt !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!