Passing Data in React with Prop Drilling

The React ecosystem offers multiple ways to pass data and manage state in a client-side application. A developer might choose between prop drilling, redux, MobX, and the new Context API introduced in React 16 depending on the size and complexity of the application they are developing.

A developer can use prop drilling (or threading) to pass data from a component higher up in the component hierarchy to a child component further down. It allows developers to access state at different levels of the component hierarchy in small applications that aren’t large or complex enough to warrant a third-party state management solution or Context.

Dan Abramov recommends that developers separate stateful and stateless components to maintain a separation of concerns. He suggests that we create top-level container components that contain many presentational components. The container components manage the application’s state and pass it to the presentational component to render it.

Let’s start by looking at how props are passed from a Parent to a Child component in React.