React & Modern Frontend (445 Qs)•Part 8: Advanced React Patterns, Portals & Performance (152 - 261)
What is prop drilling?
Prop Drilling is the process by which you pass data from one component of the React Component tree to another by going through other components that do not need the data but only help in passing it around.
Practical Code Example
jsx
// Prop Drilling: Passing props through multiple levels of components that don't need them
// Solved cleanly with React Context or state management (Zustand):
const ThemeContext = React.createContext('light');
function DeepChild() {
const theme = useContext(ThemeContext); // Direct consumption without drilling!
return <div>Theme: {theme}</div>;
}