Context

Understanding the React Context API

In React, the Context API provides a way to pass data through the component tree without having to pass props down manually at every level. It is particularly useful when dealing with global data, such as user authentication, themes, or preferences.

What is the Context API?

The Context API consists of two main parts: the Provider and the Consumer. It allows you to create a global state that can be accessed by any component in the tree without passing it explicitly through props.

Example Usage:

import React, { createContext, useContext, useState } from 'react';

// Create a context with an initial value
const MyContext = createContext();

const ParentComponent = () => {
  const [data, setData] = useState('Hello from Context!');

  return (
    // Provide the context value to the components within this tree
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

const ChildComponent = () => {
  // Consume the context value within any child component
  const contextData = useContext(MyContext);

  return (
    <div>
      <h2>Child Component</h2>
      <p>{contextData}</p>
    </div>
  );
};

export default ParentComponent;

• Theme Switching: Providing a theme preference to components.
• Authentication: Sharing user authentication status across the app.
• Localization: Passing language preferences to components.