How to Use New React Context API Detailed

React Context API is available in the react16.3 so let's build a counter using
Context API.

Context API helps us to pass down the data to the components without the use of props at every component.

In our counter app, we only pass down one level.So let's install a react app using create-react-app

npm install -g create-react-app
create-react-app newContext
cd newContext
npm start  //to start dev server

Now open with your code editor.

Let us create a new file context.js add these below code.

	import React from "react";
	const state = {
	number: 0
	};
	const NumberContext = React.createContext(state.number); //passing initial value
	export default NumberContext;

view raw context.js hosted with ❤ by GitHub

In above code First, we imported React from its library.

on line 7 we created a context using the createContext method and passed initial state.

In Below code first, we are using props to pass the value.

	import React, { Component } from "react";
	import logo from "./logo.svg";
	import "./App.css";
	function Counter(props) {
	return (
	<h1>{props.value} 💪</h1>
	);
	}
	class App extends Component {
	state = {
	number: 0
	};
	onIncHandler = () => {
	this.setState({
	number: this.state.number + 1
	});
	};
	onDecHandler = () => {
	this.setState({
	number: this.state.number - 1
	});
	};
	render() {
	return (
	<div className="App">
	<header className="App-header">
	<img src={logo} className="App-logo" alt="logo" />
	<h1 className="App-title">Welcome to React Context APi v16.3.1</h1>
	</header>
	<Counter value={this.state.number} />
	<button onClick={this.onIncHandler} className="btn">
	Increment
	</button>
	<button onClick={this.onDecHandler} className="btn">
	Decrement
	</button>
	</div>
	);
	}
	}
	export default App;

view raw appprops.txt hosted with ❤ by GitHub

Now we are replacing it with context API Instead of using props in the Counter component.

First, we need to import NumberContext from our context.js file

	import React, { Component } from "react";
	import logo from "./logo.svg";
	import "./App.css";
	import NumberContext from "./context";
	function Counter(props) {
	return (
	//by using consumer we are using value in our component.
	// we need to use a function to get our value
	<NumberContext.Consumer>{val => <h1>{val} 💪</h1>}</NumberContext.Consumer>
	);
	}
	class App extends Component {
	state = {
	number: 0
	};
	onIncHandler = () => {
	this.setState({
	number: this.state.number + 1
	});
	};
	onDecHandler = () => {
	this.setState({
	number: this.state.number - 1
	});
	};
	render() {
	return (
	<div className="App">
	<header className="App-header">
	<img src={logo} className="App-logo" alt="logo" />
	<h1 className="App-title">React Context APi v16.3.1</h1>
	</header>
	{/* by using provider we are providing value to the counter component */}
	<NumberContext.Provider value={this.state.number}>
	<Counter />
	</NumberContext.Provider>
	<button onClick={this.onIncHandler} className="btn">
	Increment
	</button>
	<button onClick={this.onDecHandler} className="btn">
	Decrement
	</button>
	</div>
	);
	}
	}
	export default App;

view raw app.js hosted with ❤ by GitHub

In line 39 above code tells first we are providing value to our component by wrapping our Counter component with the NumberContext.Provider.

Now, we can use it in our Counter component by using Consumer wrapper.

That's all in react documentation says Context is designed to share data that can be considered “global” for a tree of React components.

Code repository

Checkout --> Best laptops for programming students

Comments

[Jamal Al]

I just learned about it too. but what are the cases where you would choose this over something like redux.

[Ghanshyam]

Before you jump to react context - know what it prop drilling problem from kent c dodds
blog.kentcdodds.com/prop-drilling-...

you can choose context approach when your screens in SPA are less and you have small amount of data to handle in entire app.

[Sai gowtham]

Redux is a seperate Library used to manage the state in react. React context is used in particular use cases like login and logout or using different themes in your app.