How to set up React Context?

Follow these simple steps to set up react context in a new react project.

Step 1: Create a react project folder, open the terminal, and write the following command.

# Run this to use npm
npx create-react-app foldername
# Or run this to use yarn
yarn create react-app foldername

Step 2: Navigate to the root directory of your project using the following command.

cd foldername

Step 3: Creating a Context

We can create context by using the createContext() method given by React. See the below code snippet.

// Creating a context
import { createContext } from "react"
const AppContext = createContext();

The best practice is to create a separate folder named “context” and there you can create any number of contexts.

Step 4: Providing Context to Components

All those components that want to use data from the context must wrapped around the Context Provider.

// Providing the Context
const App = () => {
  return (
    <AppContext.Provider value={/* your shared value */}>
      {/* Components that can access the context value */}
    </AppContext.Provider>
  );
}

Step 5: Using Context in Component

To use data from context, a component can use the “useContext” hook provided by React.

const Child = () => {
    const contextValue =  useContext(AppContext);
}

That’s how we can use Context in the React project.

React Context is a feature that React provides us to manage states required in multiple components. Redux is also a state management library and solves the same problem that React Context does but in a different way. In this article, we will see in detail what is react context, why and how to use it, how it is related to and different from react-redux, and then at last we’ll see which one to use and when.