As a full-time frontend engineer, I’ve grown to build a love-hate relationship with React (but mostly the former). Throughout my experience with the frontend library, the one thing that eventually grows to be a concern as you scale up a React application is its feature of traversing props between components.

While I’ve worked with state management extensions like Flux, Redux, and recently the Apollo clients’ built in local state management module, I’ve recently got a chance to work on React’s built-in Context API. It resolves the cumbersome process of props drilling, and one less external dependency is a huge win for me!

Per the definition of the Context API on the official React documentation:

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Learning to put this into practice through example, let’s try applying this concept on a multi-component widget. We can take this from multiple perspectives – using vanilla React without the Context API, add redux, and then finally, with the Context API.

The end product

Using React

Using Redux

Using React Context