React Context API: Implementation & Examples

React Context API is a powerful tool for managing state and passing data down the component tree in a React application. It allows you to avoid "prop drilling," the process of passing data between several interconnected components, by providing a way to share data and functions between components without the need to pass props manually at each level.

In this tutorial, we'll walk through the fundamentals of React Context API and how to use it effectively in your application.

Step 1: Create a New React Project

Create a new React project by opening a terminal window and running the following command:

npx create-react-app my-app

Step 2: Set Up the Context

In this step, we'll create a new context and define the data and functions we want to share between components.

• 1. Inside the root folder of your project, navigate to src and create a new folder called contexts.
• 2. Inside the contexts folder, create a file named AppContext.js.
• 3. In the new file, import React and create a new context using the React.createContext() method:

import React, { createContext, useState } from "react";

const AppContext = createContext();

export default AppContext;

• 4. Now, let's create a provider component that will wrap the entire application. This component will store the shared data and functions. Below the previous code, add the following:

export const AppProvider = ({ children }) => {
	const [count, setCount] = useState(0);
	
	const increment = () => {
		setCount(count + 1);
	};
	
	const decrement = () => {
		setCount(count - 1);
	};
	
	return (
		<AppContext.Provider value={{ count, increment, decrement }}>
			{children}
		</AppContext.Provider>
	);
};

In the above example, we've created a provider component that maintains a count state and two functions, increment and decrement, to modify the state.

Step 3: Using the Context Provider

Now that we have our context set up, we need to wrap our application with the AppProvider we just created. This will make the context and its data available to all child components.

• 1. Open the src/index.js file.
• 2. Import the AppProvider at the top of the file:

import { AppProvider } from "./contexts/AppContext";

• 3. Wrap the App component with the AppProvider in the ReactDOM.render function:

ReactDOM.render(
	<React.StrictMode>
		<AppProvider>
			<App />
		</AppProvider>
	</React.StrictMode>
	document.getElementById("root")
);

Now, our entire application is wrapped with the AppProvider, and any component in the app can access the shared data and functions.

Step 4: Accessing Context Data in Components

Now that we've set up the context provider, let's see how to access the shared data and functions in our components.

• 1. Create a new component named Counter.js inside the src folder and include the following code:

import React, { useContext } from "react";
import AppContext from "./contexts/AppContext";

const Counter = () => {
	const { count, increment, decrement } = useContext(AppContext);
	
	return (
		<div>
			<h2>Counter</h2>
			<p>Count: {count}</p>
			<button onClick={increment}>Increment</button>
			<button onClick={decrement}>Decrement</button>
		</div>
	);
};

export default Counter;

In this component, we import useContext from React and AppContext from our context file. Then, we use useContext to access the count, increment, and decrement values from the context.

• 2. Utilize the Counter component in your src/App.js file:

import React from "react";
import Counter from "./Counter";

function App() {
	return (
		<div>
			<h1>React Context API Tutorial</h1>
			<Counter />
		</div>
	);
}

export default App;

Now, when you run your application, you should see the Counter component displaying the count and buttons for incrementing and decrementing the count.

Conclusion

Now, you've successfully implemented the React Context API to share data and functions between components in your React application.