React 16.3 New Context API Tutorial

In this is quick tutorial you'll learn how to use the new Context API in React 16.3+.

Starting with version 16.3 React has a new context API. So in this tutorial we'll learn why you need to use the API and how to get started using it.

In most real world cases a React application is consisting of multiple components which are forming a tree with top and bottom components. Now what do usually do when you are trying to get state from a top component to a bottom child component? You use something called prop drilling which simply means that you are passing props through a set of intermediary components which don't need/use the data associated with those props but receive them anyway just for the sake of sending data down to the component that's actually making use of it.

You could very well solve this problem using a state management library like Redux but in case you don't want to use a state management library the new React 16.3 context API can help you pass state to deep components in your application tree in a more elegant and easy way.

To implement the new Context API you have to consider these three things

Use the React.createContext() method to create a context with some initial value. This method returns a context object which provides two objects: a Provider and Consumer. For example let's create a context using this method:

const aContext = React.createContext('someInitialValue')

You need to use the Provider component (aContext.Provider) in the top component of the tree (the component from where you want to send the state). The Provider accepts a value prop which can take any value.

You need to use the Consumer (aContext.Consumer) component anywhere in the tree below the provider. The consumer accepts a children prop that needs to be a function which takes the provided value and returns a React element.

class App extends React.Component {
  state = {
    message: 'Hi child!'
  }
  render() {
    return (
      <aContext.Provider value={this.state.message}>
        <!-- Place consumer component-->
      </aContext.Provider>)
  }
}

The App component has a message state. By using a Provider and passing this state as a value it becomes available as a context for any Consumer component, down the tree (i.e the children of the Provider component).

Now how to create a Consumer component? By simply wrapping a render prop or a higher order component with the Context Consumer object

class MiddleComponent extends React.Component {

  render() {
    return (
      <aContext.Consumer>
        { (value) => <div>My parent component says: {value}</div>}
      </aContext.Consumer>
    )
  }
}

Then again change the App component

class App extends React.Component {
  state = {
    message: 'Hi child!'
  }
  render() {
    return (
      <aContext.Provider value={this.state.message}>
        <MiddleComponent></MiddleComponent>
      </aContext.Provider>)
  }
}

render(<App />, document.getElementById('root'))

You should get: My parent component says: Hi child!

Conclusion

Using the new React 16.3 Context API can be used as an alternative for Redux if your sole purpose of using a state management library is avoiding prop drilling.

Ahmed Bouchefra Software enginner and full-stack Python/JS developer

comments powered by Disqus