Introduction

• To share data globally across components without prop drilling.
• Wrap components with a provider and access the shared value anywhere in the tree.
• Best for global values like theme, auth, language.
• Often combined with useState/useReducer for updates.
• Data managed by the React Context API is stored in memory within the browser's current app session.

Flow

[Global State Provider] -> context
      │
      ▼
[Components] -> useContext -> read state & dispatch actions
      │
      ▼
[Actions] -> update state via useReducer or useState
      │
      ▼
[State Change triggers re-render] -> updated UI

Code

Create Context

• createContext<Type | null>()
  • creates context (comes with a Provider)
  • Type is the TS interface, is the type the context holding
• Provider → wrap all components and gives them context value

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

// 1. Create Context
const ThemeContext = createContext()
// ThemeContext.Provider → wraps children to provide values

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

  return (
    // ✅ Provider wraps components that need access
    // child components will receive: value={{ theme, setTheme }}
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  )
}

Use context value