> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/day-07/context-api-or-react-js.md).

# 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>
)
```