Retour aux articles
Thursday, January 9, 202524 vues1

Understanding and Managing Props Drilling in React: A Practical Guide

Mike Codeur

React
JavaScript

Props Drilling: A Deep Dive into Passing Props

Props Drilling, which could be translated as "props drilling," is a practice in React where data is passed from parent components to child components, even when some intermediate components do not need the data. This can quickly become a headache as your application grows in complexity. This article explores this concept and shows you how to manage it effectively.

What is Props Drilling?

Let’s consider a simple application where we need to pass a global piece of data, such as siteName, to various sections: Header, Content, and Footer.

Here is an initial example:

JSX
function App() {
  const siteName = 'superdev.io';
  return (
    <>
      <h1>Welcome to {siteName}</h1>
      <div>Site articles: {siteName}</div>
      <div>Site terms: {siteName}</div>
    </>
  );
}

To structure the code, we refactor each section into separate components:

JSX
function Header({ siteName }) {
  return <h1>Welcome to {siteName}</h1>;
}

function Content({ siteName }) {
  return <div>Site articles: {siteName}</div>;
}

function Footer({ siteName }) {
  return <div>Site terms: {siteName}</div>;
}

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

The Problem

If a component like Footer contains subcomponents (e.g., Contact and CGV), you will need to pass siteName through each subcomponent, even if not all of them use this data.

Extended Example with Props Drilling

Let’s imagine the Footer component contains two subcomponents: Contact and CGV. Here is the code with props propagation:

JSX
function Header({ siteName }) {
  return <h1>Welcome to {siteName}</h1>;
}

function Content({ siteName }) {
  return <div>Site articles: {siteName}</div>;
}

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

function CGV({ siteName }) {
  return <div>Terms and conditions: {siteName}</div>;
}

function Contact({ email }) {
  return <div>Contact us at: {email}</div>;
}

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

Limits of Props Drilling

Props Drilling works well in simple applications. However, as your application becomes more complex, this approach becomes cumbersome:

  • Data needs to be passed through components that do not require it.
  • The code becomes harder to maintain and read.

Thankfully, solutions like the Context API or state management libraries (e.g., Redux, Zustand) can solve this problem.

💻 Practical Exercise: Mastering Props Drilling

Problem: Add additional data to an application and pass it to child components.

Here is the initial code:

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} />
    </>
  );
}
  1. Create a Header component that displays the site name and the number of messages.
  2. Create a Footer component with two subcomponents: Contact and CGV.
  3. Pass the necessary data via props.

Example Solution

Here is a possible solution:

JSX
function Header({ siteName, nbMessages }) {
  return (
    <div>
      <h1>Welcome to {siteName}</h1>
      <p>You have {nbMessages} unread messages.</p>
    </div>
  );
}

function Content({ siteName }) {
  return <div>Available articles on {siteName}</div>;
}

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

function CGV({ siteName }) {
  return <p>Terms and conditions for {siteName}</p>;
}

function Contact({ email }) {
  return <p>Contact us at: {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} />
    </>
  );
}

In Summary

Props Drilling can be an effective solution for passing data in small applications. However, in more complex applications, it is recommended to use tools like the Context API or state management libraries to improve readability and maintainability.

Abonnes-toi à la NewsLetter

Apprends les meilleures pratiques pour devenir un développeur web moderne (JavaScript / React / Next).

Gagner sa vie grâce au code
Devenir développeur Freelance
+35 000 développeurs déjà inscrits.

Accès instantané. Aucune carte de crédit requise.

Rejoins +35 000 développeurs déjà inscrits.