Context API in React

From the React Components & JSX cheat sheet · Context API · verified Jul 2026

Context API

Create, provide, and consume context with createContext and useContext

jsx

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

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

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

💡 Context is for data many components need — theme, auth, locale, language

⚡ Wrap useContext in a custom hook (useTheme) for type safety and better errors

📌 Every consumer re-renders when the Provider value changes — split contexts to limit re-renders

🟢 React 19+ lets you use <Context value={...}> directly without .Provider

contextproviderusecontext

Back to the full React Components & JSX cheat sheet