React Context API

The React Context API is a feature that lets you communicate data across components without having to explicitly send props down through each level of the component tree. React is a well-known JavaScript toolkit for creating user interfaces. When data needs to be accessed by numerous components or when the data is nested deeply within the component hierarchy, this might be quite helpful.

Why Context API?

Breaking your program into components for reuse is one of React’s ideas. Therefore, a straightforward React application has a few different components. We divide them into smaller components because when our application expands, these parts may become enormous and impossible to maintain.

One of the best things about React is that you don’t have to make one incredibly large component to handle your entire application; instead, you can design a number of smaller components that together make a fully maintainable and compact application.

These smaller components may now require some data to function properly after being divided into smaller components for maintainability reasons. You must transmit data through props from the parent component to the child component if these little components require data to function. This is where we might hinder the development of our application.

Usage

You must first build a context object using React.createContext method before you can utilize the React Context API. If a consuming component does not have a matching provider higher in the tree, this context object will have the default value for the context, which will be used.

The context value can then be provided to the Provider component’s child components using this component. In order for the Provider component to supply the context value to all other components that want it, it should be positioned higher up in the component tree. The value props that the Provider component asks for should be set to the context’s current value.

Use the useContext hook or the Consumer component to consume the context value. While the Consumer component allows you to retrieve the context value within a class-based component, the useContext hook allows you to do so within a functional component.

Here is an example of how to use context API,

import React from 'react';
import { createContext, Provider, Consumer } from 'react';

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemeButton />
    </ThemeContext.Provider>
  );
}

function ThemeButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button theme={theme}>Switch Theme</button>}
    </ThemeContext.Consumer>
  );
}

In this example, the App component gives the ThemeButton component and its descendants the context value of “dark.” The Consumer component is then used by the ThemeButton component to consume the context value and use it to set the button’s theme.

It’s crucial to remember that the React Context API should not be misused as it can make your code more difficult to comprehend and debug. When you have a piece of data that needs to be shared across numerous components and you don’t want to pass the data down through props at every level of the component tree, it is often a good idea to use the context API.

Conclusion

We learned more about the React Context API in this article. One of the most significant issues we were encountering with React applications was prop-drilling, which the Context API was created to address. In a class component and then a functional component, we produced an example using the Context API. We learned how to use the useContext hook as well.