React Context API

Introduction

In modern web development, especially when creating substantial applications using React, it can become complex and burdensome to manage state across different components effectively.

What is Prop Drilling?

Prop drilling refers to the process of transferring data from parent components to deeply nested child components. This can lead to disorganized and difficult-to-maintain code, especially in large-scale applications.

Introducing the Context API

Fortunately, React offers a graceful solution to this challenge: the Context API.

What is Context API?

The Context API in React is a robust tool that enables you to control and distribute state throughout your application without the need to pass props manually through every level of the component hierarchy. It offers a method to make specific values accessible to all components within a tree, no matter how deeply they are embedded, simplifying the management of global states.

Key Concepts of the Context API:

Context: A way to store data that can be shared globally across components.
Provider: A component that supplies the context value to its child components.
Consumer: A component that consumes the context value provided by the context provider.

Steps to Use Context API

1. Create a Context:

You create a context using React.createContext(). This method returns an object that includes two components: Provider and Consumer.


const MyContext = React.createContext();

2. Wrap your app with a Context Provider:

The Provider component is utilized to wrap the section of the component tree that requires access to the context. The value prop of the Provider holds the data you wish to share.


<MyContext.Provider value={{ user: "Lavanya", age: 34 }}>
  <App />
</MyContext.Provider>

3. Access the Context in Components:

Elements within the Provider can access the context information by using either the useContext() hook (for functional components) or the Consumer component (for class components).

With useContext (Functional Components):


import { useContext } from 'react';

const MyComponent = () => {
  const contextValue = useContext(MyContext);
  return (
    <div>
      {contextValue.user} is {contextValue.age} years old.
    </div>
  );
};

With Consumer (Class Components or Without Hooks):


<MyContext.Consumer>
  {value => <div>{value.user} is {value.age} years old.</div>}
</MyContext.Consumer>

Learn React from industry experts with hands-on experience — visit our React Training in Chennai page at Credo Systemz.

Request more information

React Context API