What Is React Context

React Context is a powerful feature that enables components to share data without having to pass props manually through every level of the component tree.

What Is React Context?

The React Context API allows data to be shared across components directly, without the need to pass props at every level of the component hierarchy.

When using props for deeply nested components, passing data becomes cumbersome, and changes in one component require updating all intermediate components.

Context API solves this by creating a global data source that any component can access, enabling smoother data flow in the app.

Why Use React Context?

React Context is ideal when:

1. Global State Is Required: Context helps manage global state like themes, user authentication, and application settings.
2. Reducing Prop Drilling: Passing props down multiple levels (prop drilling) can clutter your code. Context provides a cleaner solution.
3. Consistent State Across Components: Context maintains a consistent state, which is useful when many components rely on shared data.

Creating and Using Context in React

To set up and use Context, three main steps are required:

1. Create Context: Define a new context to manage the shared state.
2. Provide Context: Wrap the components that need access to the state within a provider component.
3. Consume Context: Access the context in child components to retrieve or modify shared data.

1. Create Context

Creating a context starts by calling React.createContext(). This function returns a Context object that can be used for both providing and consuming data.

import React, { createContext } from 'react';

const ThemeContext = createContext();
export default ThemeContext;

Here, we’ve created a ThemeContext to manage theme-related information throughout the application.

2. Provide Context

The Provider component, accessible from the Context object, makes data available to all child components. Wrapping the application (or specific parts of it) in this provider allows components within this tree to access the context data.

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <MyComponent />
    </ThemeContext.Provider>
  );
}

export default App;

In this example:

• The Provider component from ThemeContext is wrapping MyComponent.
• The value prop defines the data and functions accessible by any components within ThemeContext.Provider.

3. Consume Context

To access the context data in child components, use the useContext hook.

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

function MyComponent() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <p>Current Theme: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
}

export default MyComponent;

In this component:

• We’re using useContext(ThemeContext) to access theme and setTheme.
• This allows MyComponent to display and toggle the theme without receiving props from its parent.

Practical Example: Creating a Language Selector with Context

Here’s a practical example where we create a context to manage the application’s language setting. This context can be accessed from any component to display text in the selected language.

Setting Up Language Context:

Create LanguageContext:

import { createContext, useState } from 'react';

const LanguageContext = createContext();

export function LanguageProvider({ children }) {
  const [language, setLanguage] = useState('en');

  return (
    <LanguageContext.Provider value={{ language, setLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
}

export default LanguageContext;

Wrap App with LanguageProvider:

import React from 'react';
import { LanguageProvider } from './LanguageContext';
import MainComponent from './MainComponent';

function App() {
  return (
    <LanguageProvider>
      <MainComponent />
    </LanguageProvider>
  );
}

export default App;

Use Language Context in Components:

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

function LanguageSelector() {
  const { language, setLanguage } = useContext(LanguageContext);

  return (
    <div>
      <p>Selected Language: {language}</p>
      <button onClick={() => setLanguage('en')}>English</button>
      <button onClick={() => setLanguage('es')}>Spanish</button>
    </div>
  );
}

export default LanguageSelector;

This example showcases a LanguageSelector component that toggles between languages. The selected language is accessible globally, allowing multiple components to display text in the chosen language.

Using Context with Class Components

Although hooks like useContext simplify Context usage, Context API also works with class components via contextType.

Example:

import React, { Component } from 'react';
import ThemeContext from './ThemeContext';

class ThemeComponent extends Component {
  static contextType = ThemeContext;

  render() {
    const { theme, setTheme } = this.context;
    return (
      <div>
        <p>Current Theme: {theme}</p>
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
          Toggle Theme
        </button>
      </div>
    );
  }
}

export default ThemeComponent;

Here, we use static contextType = ThemeContext to access theme in the class-based component.

Context API vs Redux

While both Context and Redux provide state management, they have different use cases:

• Context: Suitable for simple or moderate global state needs like themes, user information, and language.
• Redux: Ideal for more complex state logic, especially when managing large applications with intricate state interactions.

Context is easier to set up and integrates seamlessly within React, whereas Redux provides more advanced features like middleware, reducers, and actions for complex state management.

Key Benefits of Using React Context

1. Eliminates Prop Drilling: Allows deep components to access global data directly.
2. Global State: Manages app-wide data like themes or user authentication.
3. Simpler State Management: For simpler state needs, Context is easier to implement than Redux.