What is the use of React Context in React-Redux?

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.

What is React Context?

React Context creates a new data layer apart from virtual DOM, to make states and data easily accessible to all the components. That means if any component wants to access some data, it can subscribe to context and use or update the data as per its requirement. Whenever any state in the context gets updated by any component, all the components that are subscribed to context re-render automatically.

But wait! Why we are using react context? Are states and props not enough to handle data in our project?

Why to use React Context?

React Context solves two major problems that using state and props can’t be solved.

1. Helps in avoiding prop drilling

Suppose we have to pass data from the parent component to its grandchild, what do we generally do? we pass data as props from parent to its child and then from child, we pass data as props to its grandchild. In this whole scenario child does not need that data but still, it is becoming a bridge to connect parent and grandchild.

This passing of props from higher-level components to deeply nested components using intermediate components is basically prop drilling. Prop drilling can cause performance issues because when the prop changes, intermediate components will also re-render unnecessarily and prop drilling also makes the code less maintainable.

2. Helps in Lifting the state up

Lifting the state up means if the sibling components want to share data using a common state then we have to declare that state in the parent component of all the siblings, as there is no other way to connect siblings. Since we are lifting the state from a lower level to a higher level, we call this lifting the state up.

     Parent
       /    \
Child1    Child2 - Siblings

React Context works as a centralized store from where any component can access the state they want. That means we don’t need to pass props using prop drilling. This is how React Context helps in avoiding props drilling, and make code more maintainable and also prevents unnecessary re-renders caused by prop drilling.

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.

How React Context is related to React-Redux?

Both react context and react-redux can be used for managing the state in the react app. They have similarities and difference both.

• As we create Context we can create a store in redux and useContext also works similarly to useSelector in redux.
• React Context re-renders all the components that are using the context value on any state change which results in performance issues. But in redux, only those components re-renders whareis subscribed to the particular state.
• In terms of usage, React Context is easier to learn and simpler to set up whereas react redux is a bit difficult for beginners and complex to set up.
• We can create multiple contexts in the react app but we have only one store while using redux.

What to use and When?

Deciding which one to use depends on multiple factors like the size and complexity of the app. So, use React Context when you have simple state management and your app size is smaller and Redux comes in handy when you have complex state management and the app size is bigger.