I learned today: Props drilling, UseContext (in Hooks) & discuss about yesterday’s interview questions…
Props Drilling:
Props Drilling refers to the process of passing data from a parent component to deeply nested child components by passing it through intermediate components that don’t actually need the data, but just pass it down.
**
Example:**
import React from "react";
// Parent component that holds the message and passes it down
function Parent() {
const message = "Hello from Parent";
return (
<div>
<Child message={message} />
</div>
);
}
function Child({ message }) {
return (
<div>
<Grandchild message={message} />
</div>
);
}
function Grandchild({ message }) {
return (
<div>
<p>Message: {message}</p>
</div>
);
}
export default function App() {
return (
<div>
<Parent />
</div>
);
}
Here, the user prop is passed from App → Parent → Child → GrandChild, even though only GrandChild uses it.
Output:
Message: Hello from Parent
React Context API:
How to Avoid Prop Drilling Problem?
