React Prop Drilling: Should You Use It?

Different State Management Strategy.

React Prop Drilling is drilling of the data, from the parent component to the child component. This is passing the data which should be accessible throughout the levels.

Photo by Mimi Thian on Unsplash

The data is conducted to the child component, which either displays or fetches data using different protocols. We do a lot of caching to avoid re-rendering of the react component, but if our application is complex and deeply nested. The rerending will occur whenever the props get updated.

Let’s understand about prop drilling, but try to

For instance, if you have a component hierarchy like this:

ParentComponent
  ├── IntermediateComponent1
  │     └── IntermediateComponent2
  │           └── TargetComponent

If ParentComponent has some data that TargetComponent needs, prop drilling involves passing that data from ParentComponent through IntermediateComponent1 and IntermediateComponent2 before it finally reaches TargetComponent. Each intermediary component receives the data as props and passes it down to the next level.

function App() {
  const [user, setUser] = useState({ name: "John Doe" });

  return (
    <div>
      <Parent user={user} />
    </div>
  );
}

function ParentComponent({ user }) {…