New Context API in React 16.3.0

React 16.3.0 is out now and with this release React Team has released the much awaited new context API which is a complete re-write of the existing one. We don’t need to be afraid anymore to use this in our production code unlike previous times where search on the official docs used to show “Why not to use context API?”

Before React 16.3.0

Since the API is stable now and good to be used in the production, let us discuss why is there a need to use this in our code.

Why Context?

React Context is a way for a child component to access a value in a parent component. This is a familiar problem in React and is popularly known as prop drilling.

Prop drilling occurs in situations where you’re looking to get the state from the top of your react tree to the bottom and you end up passing props through components that do not necessarily need them.

React Context solves the problem of props drilling. It allows you to share props or state with an indirect child or parent.

This is typically solved with the use of state management libraries like Redux but what if we don’t want to use them and maintain the states in the component itself. This is where context comes into picture and make our life a bit easy.

Context Reborn

I am really excited about this re-write and wanted to give it a try. In order to try the API you would need to make/change to below configuration:

1. Upgrade to React 16.3.0 version in your package.json file.
2. Make sure to upgrade react-dom to version 16.3.0 as well, otherwise react will throw an error while mounting component tree.

You are all set to explore the true power!

Here’s the simplest useful example I can come up with:

I want to display a name that is declared in the parent component but is to be rendered in the immediate child.

In order to implement this using context API let us understand the set up.

The App component is root component of the React tree. <Child /> has App as parent component. In a typical set up if we want to send something from App to <Child /> we would send it as props but in the above example we are not sending anything as props but are still able to get the name to be rendered in <Child />

The new context API consists of three main parts:

• React.createContext which is passed the initial value (optional). This returns an object with a Provider and a Consumer
• The Provider component is used higher in the tree and accepts a prop called value (which can be anything).
• The Consumer component is used anywhere below the provider in the tree and accepts a prop called “children” which must be a function that accepts the value and must return a react element (JSX).

In the above example propsToBeSentByContext is an object which needs to accessed in <Child /> to render the desired result. propsToBeSentByContext has been passed as prop to Provider which can be accessed by any component down the tree using Consumer

I am using render prop pattern to return name as heading which is children to Consumer component. Anywhere we want to access name in the tree we would just need to wrap our component as children to Consumer . It’s this simple and useful.

If you want to go over my code to see how I have implemented this, please visit demo

Thanks for reading. Please let me know your valuable feedbacks.