React est l’un des frameworks frontaux les plus populaires pour JavaScript. Contrairement à d’autres frameworks comme Angular, il est très peu subjectif. Par conséquent, c’est à vous de décider comment vous voulez écrire ou structurer votre code React.


Certaines des meilleures pratiques de React que vous devriez suivre pour améliorer les performances de votre application sont énumérées ci-dessous.

1. Utiliser des composants fonctionnels et des hooks au lieu de classes

Dans React, vous pouvez utiliser des classes ou des composants fonctionnels avec des hooks. Vous devriez cependant utiliser plus souvent les composants fonctionnels et les hooks car ils permettent d’obtenir un code plus concis et plus lisible que les classes.

Considérez le composant de classe suivant qui affiche les données de l’API de la NASA.

 class NasaData extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          data: json,
        });
      });
  }

  render() {
    const { data } = this.state;

    if (!data.length)
      return (
        <div>
          <h1> Fetching data.... </h1>{" "}
        </div>
      );

    return (
      <>
        <h1> Fetch data using Class component </h1>{" "}
        {data.map((item) => (
          <div key={item.id}>{item.title}</div>
        ))}
      </>
    );
  }
}

Vous pouvez écrire le même composant en utilisant des hooks :

 const NasaData = () => {
  const [data, setdata] = useState(null);

  useEffect(() => {
    fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
      .then((res) => res.json())
      .then((json) => {
        setdata(json);
      });
  }, [data]);

  return (
    <>
      <h1> Fetch data using Class component </h1>{" "}
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </>
  );
};

Même si le bloc de code ci-dessus fait la même chose que le composant de classe, il est moins complexe, minimal et facile à comprendre.

2. Éviter d’utiliser l’état (si possible)

L’état React garde la trace des données qui, lorsqu’elles sont modifiées, déclenchent un nouveau rendu du composant React. Lorsque vous créez des applications React, évitez d’utiliser l’état autant que possible, car plus vous utilisez l’état, plus vous devez garder la trace des données dans votre application.

Lire  Comment rendre votre serveur Minecraft Raspberry Pi accessible pour le multijoueur en ligne

Une façon de minimiser l’utilisation de l’état est de le déclarer uniquement lorsque cela est nécessaire. Par exemple, si vous récupérez des données utilisateur à partir d’une API, stockez l’objet utilisateur complet dans l’état au lieu de stocker les propriétés individuelles.

Au lieu de faire cela :

 const [username, setusername] = useState('')
const [password, setpassword] = useState('')

Faites ceci :

 const [user, setuser] = useState({})

Lorsque vous décidez d’une structure de dossiers pour votre application React, optez pour une structure centrée sur les composants. Cela signifie stocker tous les fichiers concernant un composant dans un seul dossier.

Si vous créez un composant Navbar, par exemple, créez un dossier nommé Navbar contenant le fichier du composant, la feuille de style et les autres fichiers JavaSript et actifs utilisés dans le composant.

Un dossier unique contenant tous les fichiers d’un composant facilite la réutilisation, le partage et le débogage. Si vous avez besoin de voir comment un composant fonctionne, il vous suffit d’ouvrir un seul dossier.

Les autres bonnes pratiques en matière de dossiers React sont :

  1. Utilisez des fichiers d’index pour abstraire les détails de mise en œuvre de votre fichier de composant. En considérant l’exemple de la Navbar, créez un dossier Navbar et dans ce dossier, ajoutez un fichier composant nommé index.js (ou .ts).
  2. Conservez les composants réutilisables dans un dossier distinct. Si vous avez des composants que plusieurs parties de votre application utilisent, pensez à les conserver dans un dossier nommé components. Cela vous aidera à les localiser facilement.
  3. Conservez les fonctions utilitaires dans un dossier séparé, tel qu’un dossier lib ou helpers. Il sera ainsi plus facile de gérer et de réutiliser ces fonctions par la suite.

4. Évitez d’utiliser les index comme accessoires clés

React utilise des clés pour identifier de manière unique les éléments d’un tableau. Grâce aux clés, React peut déterminer avec précision quel élément a été modifié, ajouté ou supprimé du tableau.

Lors du rendu des tableaux, vous pouvez utiliser l’index comme clé.

 const Items = () => {
  const arr = ["item1", "item2", "item3", "item4", "item5"];

  return (
    <>
      {arr.map((elem, index) => {
        <li key={index}>{elem}</li>;
      })}
    </>
  );
};

Bien que cela fonctionne parfois, l’utilisation de l’index comme clé peut poser des problèmes, surtout si la liste est appelée à changer. Considérons cette liste.

 const arr = ["item1", "item2", "item3", "item4", "item5"];

Actuellement, le premier élément de la liste, « Item1 », se trouve à l’index zéro, mais si vous ajoutez un autre élément au début de la liste, l’index « Item1 » sera modifié. « Item1 » L’indice sera changé en 1, ce qui modifiera le comportement de votre tableau.

Lire  L'application One Sec diminuera-t-elle votre utilisation du téléphone ?

La solution consiste à utiliser une valeur unique comme index pour garantir le maintien de l’identité de l’élément de la liste.

5. Optez pour des fragments au lieu de Divs lorsque c’est possible

Les composants React doivent retourner du code enveloppé dans une seule balise, généralement un <div&gt ; ou un fragment React. Vous devez opter pour les fragments lorsque cela est possible.

Utilisation de <div&gt ; augmente la taille du DOM, en particulier dans les projets volumineux, car plus vous avez de balises ou de nœuds DOM, plus votre site Web a besoin de mémoire et plus le navigateur utilise de puissance pour charger votre site Web. Cela entraîne une diminution de la vitesse des pages et une expérience utilisateur potentiellement médiocre.

Un exemple d’élimination des balises <div&gt ; inutiles est de ne pas les utiliser lors du renvoi d’un seul élément.

 const Button = () => {
  return <button>Display</button>;
};

6. Respecter les conventions de nommage

Vous devez toujours utiliser la casse Pascal pour nommer les composants afin de les différencier des autres fichiers JSX sans composant. Par exemple : TextField, NavMenu et SuccessButton.

Utilisez camelCase pour les fonctions déclarées dans les composants React comme handleInput() ou showElement().

7. Éviter le code répétitif

Si vous remarquez que vous écrivez du code répétitif, convertissez-le en composants qui peuvent être réutilisés.

Par exemple, il est plus judicieux de créer un composant pour votre menu de navigation plutôt que d’écrire le code de manière répétée dans chaque composant qui nécessite un menu.

C’est l’avantage d’une architecture basée sur les composants. Vous pouvez décomposer votre projet en petits composants que vous pouvez réutiliser dans votre application.

8. Utiliser la destruction d’objets pour les accessoires

Au lieu de passer l’objet props, utilisez la déstructuration d’objet pour passer le nom du prop. Ainsi, il n’est pas nécessaire de faire référence à l’objet props à chaque fois que vous devez l’utiliser.

Lire  Comment convertir des PNG en JPEG sur un Mac

Par exemple, voici un composant qui utilise les props tels quels.

 const Button = (props) => {
  return <button>{props.text}</button>;
};

Avec la déstructuration des objets, vous vous référez directement au texte.

 const Button = ({text}) => {
  return <button>{text}</button>;
};

9. Rendre dynamiquement des tableaux à l’aide de Map

Utilisez map() pour rendre dynamiquement des blocs HTML répétés. Par exemple, vous pouvez utiliser map() pour rendre une liste d’éléments dans les balises <li&gt ;.

 const Items = () => {
  const arr = ["item1", "item2", "item3", "item4", "item5"];

  return (
    <>
      {arr.map((elem, index) => {
        <li key={elem+index}>{elem}</li>;
      })}
    </>
  );
};

À titre de comparaison, voici comment vous pouvez rendre la liste sans map(). Cette approche est très répétitive. 

 const List = () => {
  return (
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
    </ul>
  );
};

10. Écrire des tests pour chaque composant React

Écrivez des tests pour les composants que vous créez car cela réduit la possibilité d’erreurs. Les tests garantissent que les composants se comportent comme vous l’attendez. L’un des frameworks de test les plus courants pour React est Jest, et il fournit un environnement dans lequel vous pouvez exécuter vos tests.

React est un outil puissant, mais vous devez respecter certaines pratiques.

Bien que React soit très flexible dans la façon dont vous pouvez l’utiliser, le respect de pratiques spécifiques vous aidera à tirer le meilleur parti de votre expérience.

Lorsque vous suivez ces conseils, gardez à l’esprit votre projet et vos objectifs particuliers, car différentes meilleures pratiques React peuvent être plus pertinentes dans différents contextes. Par exemple, un projet avec une petite équipe et une portée limitée peut ne pas nécessiter le même niveau d’organisation des dossiers qu’un grand projet avec plusieurs équipes travaillant ensemble.