React Context and how to use it

React Context is a powerful feature in the React framework that allows you to share data between components without having to pass the data through a chain of props. It can be used to store and share application-wide data, like the current user or theme, or to share data between components that are not directly related.

In this article, we will explore what React Context is, how it works, and how you can use it in your React applications.

What is React Context?

In React, the data is usually passed down from a parent component to a child component using props. This can be cumbersome and inefficient when the data needs to be shared across multiple components at different levels in the component tree.

React Context is a way to share data between components without having to pass it through props. It provides a way to store data at a central location and then access that data from any component in the application.

How does React Context work?

React Context works by providing two components: Provider and Consumer.

The Provider component is used to provide the data that needs to be shared. It accepts a value prop that can be any JavaScript object, such as a string, number, object, or array.

const MyContext = React.createContext();

function MyProvider(props) {
  return (
    <MyContext.Provider value={/* your data */}>
      {props.children}
    </MyContext.Provider>
  );
}

The Consumer component is used to access the data that is provided by the Provider. It uses a function as a child, which receives the value prop provided by the Provider

function MyConsumer(props) {
  return (
    <MyContext.Consumer>
      {value => (
        /* render something based on the value */
      )}
    </MyContext.Consumer>
  );
}

When the data changes in the Provider, all the components that use the Consumer will be re-rendered with the new data.

How to use React Context in your application

To use React Context in your application, you need to follow these steps:

Create a new context using React.createContext().

Create a new component that uses the Provider component to provide the data that needs to be shared.

Wrap your application with the Provider component.

Use the Consumer component to access the data in any component that needs it.

Here is an example of how to use React Context to provide a dark theme to your application:

import React from 'react';

const ThemeContext = React.createContext('light');

function ThemeProvider(props) {
  const [theme, setTheme] = React.useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
}

function App() {
  return (
    <ThemeProvider>
      <div className="App">
        <Header />
        <Content />
        <Footer />
      </div>
    </ThemeProvider>
  );
}

function Header() {
  return (
    <ThemeContext.Consumer>
      {({ theme }) => (
        <header className={`App-header ${theme}`}>
          <h1>React Context Example</h1>
        </header>
      )}
    </ThemeContext.Consumer>
  );
}

function Content() {
  return (
    <ThemeContext.Consumer>
      {({ theme, toggleTheme }) => (
        <div className={`App-content ${theme}`}>
          <p>This is some content.</p>