Simplifying State Management in React with the Context API

In this article, we'll explore what the Context API is, how to implement it, and why it's needed.

Let's start by creating a scenario. Imagine our application has four components. The A and B components each have nested components, C and D, respectively. Now, suppose we want to pass a prop to the C and D components. To do this, we would need to pass the prop through the A and B components so that it can reach the C and D components. This process is inefficient.

Why Context API?

To avoid prop drilling and optimize memory, React provides the Context API.

What Does the Context Object Contain?

The createContext function returns an object containing two components: Provider and Consumer.

Provider

import React from 'react';
import MyContext from './MyContext.js';

const MyProvider = ({ children }) => {
  return (
    <MyContext.Provider value={{}}>
      {children}
    </MyContext.Provider>
  );
};

export default MyProvider;

Consumer

const ChildComponent = () => {
  return (
    <MyContext.Consumer>
      {value => (
        <div>
          Count: {value.count}
        </div>
      )}
    </MyContext.Consumer>
  );
};

Syntax 2: Using useContext Hook

import React, { useContext } from 'react';
import MyContext from './MyContext';

const ChildComponent = () => {
  const value = useContext(MyContext);

  return <div>Count: {value.count}</div>;
};

Advantages of useContext

• Cleaner syntax
• Less boilerplate
• Better with hooks
• Avoids deep nesting

Summary

React Context API provides a centralized store for state while eliminating prop drilling. The useContext hook further simplifies consumption, improving readability and maintainability.