Context best practices in React

Introduction

Context helps share data easily across many parts of a React app without passing props everywhere.

When many components need the same data, like user info or theme settings.

To avoid passing props through many layers of components.

When you want to keep global state simple and easy to access.

To share settings like language or color mode across the app.

When you want to avoid prop drilling that makes code messy.

Syntax

React

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

const MyContext = createContext(null);

function MyProvider({ children }) {
  const [value, setValue] = useState(null);

  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
}

function MyComponent() {
  const context = useContext(MyContext);
  // use context.value or context.setValue
}

Always create context outside components to avoid recreating it on every render.

Use a Provider to wrap components that need access to the context data.

Examples

Creates a theme context with default 'light' and provides 'dark' to children.

React

const ThemeContext = createContext('light');

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

Reads the current theme from context and shows it.

React

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>The current theme is {theme}</div>;
}

Provides user data and a way to update it to all children.

React

const UserContext = createContext(null);

function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  return <UserContext.Provider value={{ user, setUser }}>{children}</UserContext.Provider>;
}

Sample Program

This example shows a language context that shares the current language and a way to change it. The LanguageSwitcher component reads and updates the language using context.

React

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

const LanguageContext = createContext('English');

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

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

function LanguageSwitcher() {
  const { language, setLanguage } = 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>
  );
}

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

Important Notes

Keep context values simple to avoid unnecessary re-renders.

Do not put large objects or functions in context unless needed.

Use multiple contexts if you have different kinds of data to share.

Summary

Context helps share data without passing props through many layers.

Wrap components with a Provider to give them access to context data.

Use useContext hook inside components to read or update context values.