Understanding and Managing Props Drilling in React: A Practical Guide
Mike Codeur
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:
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:
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:
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:
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} />
</>
);
}
- Create a
Header
component that displays the site name and the number of messages. - Create a
Footer
component with two subcomponents: Contact and CGV. - Pass the necessary data via
props
.
Example Solution
Here is a possible solution:
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.