Comprendre et Gérer le Props Drilling en React : Guide Pratique

Le Props Drilling, que l’on pourrait traduire par "forage des props", est une pratique en React où les données sont transmises de composants parents à composants enfants, même si certains composants intermédiaires n'ont pas besoin de ces données. Cela peut rapidement devenir un casse-tête lorsque votre application devient complexe. Cet article explore ce concept et vous montre comment le gérer efficacement.

Qu'est-ce que le Props Drilling ?

Prenons une application simple où l'on doit transmettre une donnée globale, par exemple siteName, à différentes sections : Header, Content, et Footer.

Voici un exemple de code initial :

JSX

function App() {
  const siteName = 'superdev.io';
  return (
    <>
      <h1>Bienvenue sur {siteName}</h1>
      <div>Articles du site : {siteName}</div>
      <div>CGV du site : {siteName}</div>
    </>
  );
}

Pour structurer le code, on refactorise chaque section en composants séparés :

JSX

function Header({ siteName }) {
  return <h1>Bienvenue sur {siteName}</h1>;
}

function Content({ siteName }) {
  return <div>Articles du site : {siteName}</div>;
}

function Footer({ siteName }) {
  return <div>CGV du site : {siteName}</div>;
}

function App() {
  const siteName = 'superdev.io';
  return (
    <>
      <Header siteName={siteName} />
      <Content siteName={siteName} />
      <Footer siteName={siteName} />
    </>
  );
}

Problème : Si un composant comme Footer contient des sous-composants (par exemple, Contact et CGV), il faudra passer siteName à travers chaque sous-composant, même si ces composants n’utilisent pas tous cette donnée.

Exemple Étendu avec Props Drilling

Imaginons que le composant Footer contienne deux sous-composants : Contact et CGV. Voici le code avec propagation des props :

JSX

function Header({ siteName }) {
  return <h1>Bienvenue sur {siteName}</h1>;
}

function Content({ siteName }) {
  return <div>Articles du site : {siteName}</div>;
}

function Footer({ siteName, email }) {
  return (
    <>
      <CGV siteName={siteName} />
      <Contact email={email} />
    </>
  );
}

function CGV({ siteName }) {
  return <div>Conditions générales : {siteName}</div>;
}

function Contact({ email }) {
  return <div>Contactez-nous à : {email}</div>;
}

function App() {
  const siteName = 'superdev.io';
  const email = '[email protected]';
  return (
    <>
      <Header siteName={siteName} />
      <Content siteName={siteName} />
      <Footer siteName={siteName} email={email} />
    </>
  );
}

Limites du Props Drilling

Le Props Drilling fonctionne dans des applications simples. Mais dès que votre application devient plus complexe, cette approche devient fastidieuse :

Les données doivent être transmises à travers des composants qui n’en ont pas besoin.
Le code devient difficile à maintenir et à lire.

Heureusement, des solutions comme Context API ou des bibliothèques de gestion d’état (Redux, Zustand, etc.) peuvent résoudre ce problème.

💻 Exercice Pratique : Maîtrisez le Props Drilling

Problème : Ajoutez des données supplémentaires dans une application et transmettez-les aux composants enfants.

Voici le code initial :

JSX

function App() {
  const siteName = 'superdev.io';
  const email = '[email protected]';
  const nbMessages = 42;
  return (
    <>
      <Header siteName={siteName} nbMessages={nbMessages} />
      <Content siteName={siteName} />
      <Footer siteName={siteName} email={email} />
    </>
  );
}

Créez un composant Header qui affiche le nom du site et le nombre de messages.
Créez un composant Footer avec deux sous-composants : Contact et CGV.
Transmettez les données nécessaires via les props.

Exemple de Solution

Voici une solution possible :

JSX

function Header({ siteName, nbMessages }) {
  return (
    <div>
      <h1>Bienvenue sur {siteName}</h1>
      <p>Vous avez {nbMessages} messages non lus.</p>
    </div>
  );
}

function Content({ siteName }) {
  return <div>Articles disponibles sur {siteName}</div>;
}

function Footer({ siteName, email }) {
  return (
    <div>
      <CGV siteName={siteName} />
      <Contact email={email} />
    </div>
  );
}

function CGV({ siteName }) {
  return <p>Conditions générales pour {siteName}</p>;
}

function Contact({ email }) {
  return <p>Contactez-nous à : {email}</p>;
}

function App() {
  const siteName = 'superdev.io';
  const email = '[email protected]';
  const nbMessages = 42;
  return (
    <>
      <Header siteName={siteName} nbMessages={nbMessages} />
      <Content siteName={siteName} />
      <Footer siteName={siteName} email={email} />
    </>
  );
}

En Résumé

Le Props Drilling peut être une solution efficace pour transmettre des données dans une petite application. Cependant, dans des applications plus complexes, il est recommandé d’utiliser des outils comme Context API ou des bibliothèques de gestion d’état pour améliorer la lisibilité et la maintenabilité.