Context API | React JS

what is context API and why we need this

Recently React introduced some new cool fetures, one of interesting and much awaited feature is New Context API. New context API introduced with version 16.3. Context API’s are very useful in state management without props drilling. Let’s deep dive into the same.

Problem

In many cases, in our application we need to pass the state of componenet to two-three level deep. so we passed props down to the levels and levels of the component tree when not all of those components necessarily need those props. Suppose component hierarchy is complex then state management would be overhead for developers.

Solution

For state management theres are couple of libraries available like Redux (most used and trending). But React introduced the Context API to solve the problem of props drilling and made developers work of state management simple.

When to use Context

As React suggests “If you only want to avoid passing some props through many levels. Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.”

How to use Context

So now if you want to use context in your application, first create context object.

import { createContext } from 'react';

const {Provider, Consumer } = React.createContext();

Then create a wrapper component that will return Provider component and also add as children all the components from which you want to access the context.

class ProviderComponent extends Component {
    state = {
        title : “Vishal”,
    }

render() {
        return ( 
        <Provider value={this.state}>
          <Website />
        </Provider>
        )
    }
}

Our Website component look like

const Website = () => (
  <div>
    <Header />
    <Footer />
  </div>
)

Now if we want to access the title from provider component to the Header componet, we can simply consume state of provider component using context without prop drilling.

const Header = () => (
  <div>
     <Consumer>
        {(context) => context.title}
      </Consumer>
  </div>
)