What is Props Drilling in React?

Props drilling is a common issue in React applications where data is passed through multiple layers of components. This happens when a component higher up in the tree needs access to data that is defined at a lower level. Instead of lifting the state up to a common ancestor, props are passed down through each intermediate component, leading to repetitive and potentially messy code.

Example

Let’s consider a simple example to illustrate props drilling. Suppose we have a nested component structure with a User component at the top level and a Button component at the bottom level. The Button component needs to access a theme prop that is defined in the App component.

const App = () => {
    const theme = 'light';
    return (
        <div>
            <User theme={theme} />
        </div>
    );
};

const User = ({ theme }) => {
    return (
        <div>
            <Button theme={theme} />
        </div>
    );
};

const Button = ({ theme }) => {
    return (
        <button style={{ backgroundColor: theme === 'light' ? 'white' : 'black' }}>
            Click me
        </button>
    );
};

In this example, the theme prop is passed from the App component to the User component, and then to the Button component. This is a simple example, but it can quickly become a problem in larger applications, especially when dealing with more complex data structures.

How to Avoid Props Drilling

Context API: The Context API provides a way to share data between components without having to pass props through intermediate components.
Custom Hooks: Custom hooks can be used to encapsulate state and logic, allowing for more reusable and modular code.
State Management Libraries: Libraries like Redux, MobX, or Zustand can help manage state in a centralized way, reducing the need for props drilling.

Example with Context API

const ThemeContext = React.createContext();

const App = () => {
    const theme = 'light';
    return (
        <ThemeContext.Provider value={theme}>
            <User />
        </ThemeContext.Provider>
    );
};

const User = () => {
    return (
        <div>
            <Button />
        </div>
    );
};

const Button = () => {
    const theme = React.useContext(ThemeContext);
    return (
        <button style={{ backgroundColor: theme === 'light' ? 'white' : 'black' }}>
            Click me
        </button>
    );
};

In this example, the theme prop is provided at the App component level and accessed using the useContext hook in the Button component. This avoids the need to pass the prop through intermediate components.