Why context is needed in React

Introduction

Context helps share data easily between parts of a React app without passing props step-by-step.

You want to share user login info across many components.

You need a theme (like dark or light mode) available everywhere.

You want to avoid passing the same data through many layers of components.

You have settings or language preferences used in many places.

You want to keep your code clean and simple by reducing prop drilling.

Syntax

React

const MyContext = React.createContext(defaultValue);

function MyProvider({ children }) {
  const value = ...; // some shared data
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}

function MyComponent() {
  const contextValue = React.useContext(MyContext);
  return <div>{contextValue}</div>;
}

React.createContext creates a context object.

Provider wraps components to share data.

Examples

This example shares a theme value "dark" to a button deep inside components without passing props.

React

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

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

function Toolbar() {
  return <ThemeButton />;
}

function ThemeButton() {
  const theme = React.useContext(ThemeContext);
  return <button>{`Theme is ${theme}`}</button>;
}

This example shares user info so any component can greet the user without prop drilling.

React

const UserContext = React.createContext(null);

function UserProvider({ children }) {
  const user = { name: 'Anna' };
  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}

function Greeting() {
  const user = React.useContext(UserContext);
  return <h1>{`Hello, ${user.name}!`}</h1>;
}

Sample Program

This React app uses context to share the current language and a way to change it. The LanguageSwitcher component can read and update the language without props.

React

import React from 'react';

const LanguageContext = React.createContext('English');

function LanguageProvider({ children }) {
  const [language, setLanguage] = React.useState('English');

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

function LanguageSwitcher() {
  const { language, setLanguage } = React.useContext(LanguageContext);

  return (
    <div>
      <p>Current language: {language}</p>
      <button onClick={() => setLanguage('Spanish')}>Switch to Spanish</button>
      <button onClick={() => setLanguage('English')}>Switch to English</button>
    </div>
  );
}

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

export default App;

Important Notes

Context is great for global data but avoid overusing it for everything.

Updating context causes all components using it to re-render.

Use context to keep your app organized and avoid passing props through many layers.

Summary

Context shares data easily across many components.

It helps avoid passing props through many layers (prop drilling).

Use context for global info like themes, user data, or settings.