React Context Patterns | Bootspring Docs

Effective patterns for using React Context for state management.

Overview#

React Context is built into React and works well for certain use cases. This pattern covers:

Basic context setup
Context with reducer
Optimized context splitting
Context with localStorage
Composable providers

Basic Context#

A simple theme context with provider and hook.

// contexts/ThemeContext.tsx
'use client'

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

type Theme = 'light' | 'dark'

interface ThemeContextType {
  theme: Theme
  setTheme: (theme: Theme) => void
  toggleTheme: () => void
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light')

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light')
  }

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

export function useTheme() {
  const context = useContext(ThemeContext)

  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider')
  }

  return context
}

// Usage
function ThemeToggle() {
  const { theme, toggleTheme } = useTheme()

  return (
    <button onClick={toggleTheme}>
      Current: {theme}
    </button>
  )
}

Context with Reducer#

Use useReducer for complex state logic.

// contexts/CartContext.tsx
'use client'

import { createContext, useContext, useReducer, ReactNode, Dispatch } from 'react'

interface CartItem {
  id: string
  name: string
  price: number
  quantity: number
}

interface CartState {
  items: CartItem[]
  total: number
}

type CartAction =
  | { type: 'ADD_ITEM'; payload: Omit<CartItem, 'quantity'> }
  | { type: 'REMOVE_ITEM'; payload: string }
  | { type: 'UPDATE_QUANTITY'; payload: { id: string; quantity: number } }
  | { type: 'CLEAR_CART' }

function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case 'ADD_ITEM': {
      const existing = state.items.find(i => i.id === action.payload.id)

      if (existing) {
        const items = state.items.map(i =>
          i.id === action.payload.id
            ? { ...i, quantity: i.quantity + 1 }
            : i
        )
        return { ...state, items, total: calculateTotal(items) }
      }

      const items = [...state.items, { ...action.payload, quantity: 1 }]
      return { ...state, items, total: calculateTotal(items) }
    }

    case 'REMOVE_ITEM': {
      const items = state.items.filter(i => i.id !== action.payload)
      return { ...state, items, total: calculateTotal(items) }
    }

    case 'UPDATE_QUANTITY': {
      const items = state.items
        .map(i => i.id === action.payload.id
          ? { ...i, quantity: action.payload.quantity }
          : i
        )
        .filter(i => i.quantity > 0)
      return { ...state, items, total: calculateTotal(items) }
    }

    case 'CLEAR_CART':
      return { items: [], total: 0 }

    default:
      return state
  }
}

function calculateTotal(items: CartItem[]): number {
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0)
}

interface CartContextType {
  state: CartState
  dispatch: Dispatch<CartAction>
  addItem: (item: Omit<CartItem, 'quantity'>) => void
  removeItem: (id: string) => void
  updateQuantity: (id: string, quantity: number) => void
  clearCart: () => void
}

const CartContext = createContext<CartContextType | undefined>(undefined)

export function CartProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 })

  const addItem = (item: Omit<CartItem, 'quantity'>) =>
    dispatch({ type: 'ADD_ITEM', payload: item })

  const removeItem = (id: string) =>
    dispatch({ type: 'REMOVE_ITEM', payload: id })

  const updateQuantity = (id: string, quantity: number) =>
    dispatch({ type: 'UPDATE_QUANTITY', payload: { id, quantity } })

  const clearCart = () =>
    dispatch({ type: 'CLEAR_CART' })

  return (
    <CartContext.Provider value={{
      state, dispatch, addItem, removeItem, updateQuantity, clearCart
    }}>
      {children}
    </CartContext.Provider>
  )
}

export function useCart() {
  const context = useContext(CartContext)
  if (!context) {
    throw new Error('useCart must be used within a CartProvider')
  }
  return context
}

Optimized Context#

Split state and actions to prevent unnecessary re-renders.

// contexts/OptimizedUserContext.tsx
import { createContext, useContext, useState, useMemo, ReactNode } from 'react'

interface User {
  id: string
  name: string
  email: string
}

// Separate contexts for state and actions
const UserStateContext = createContext<User | null>(null)
const UserActionsContext = createContext<{
  setUser: (user: User | null) => void
  updateUser: (updates: Partial<User>) => void
} | null>(null)

export function UserProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null)

  // Memoize actions to prevent re-renders
  const actions = useMemo(() => ({
    setUser,
    updateUser: (updates: Partial<User>) =>
      setUser(prev => prev ? { ...prev, ...updates } : null)
  }), [])

  return (
    <UserStateContext.Provider value={user}>
      <UserActionsContext.Provider value={actions}>
        {children}
      </UserActionsContext.Provider>
    </UserStateContext.Provider>
  )
}

// Separate hooks for state and actions
export function useUser() {
  return useContext(UserStateContext)
}

export function useUserActions() {
  const context = useContext(UserActionsContext)
  if (!context) {
    throw new Error('useUserActions must be used within UserProvider')
  }
  return context
}

// Components that only read user won't re-render when actions change
function UserDisplay() {
  const user = useUser()
  return <span>{user?.name}</span>
}

// Components that only use actions won't re-render when user changes
function LogoutButton() {
  const { setUser } = useUserActions()
  return <button onClick={() => setUser(null)}>Logout</button>
}

Composable Providers#

Combine multiple providers cleanly.

// app/providers.tsx
'use client'

import { ThemeProvider } from '@/contexts/ThemeContext'
import { UserProvider } from '@/contexts/UserContext'
import { CartProvider } from '@/contexts/CartContext'
import { QueryProvider } from '@/contexts/QueryContext'
import { ReactNode } from 'react'

type Provider = ({ children }: { children: ReactNode }) => JSX.Element

function composeProviders(...providers: Provider[]) {
  return ({ children }: { children: ReactNode }) =>
    providers.reduceRight(
      (acc, Provider) => <Provider>{acc}</Provider>,
      children
    )
}

const Providers = composeProviders(
  QueryProvider,
  ThemeProvider,
  UserProvider,
  CartProvider
)

export default Providers

// app/layout.tsx
import Providers from './providers'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Context with localStorage#

Persist context state to localStorage.

// contexts/SettingsContext.tsx
'use client'

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

interface Settings {
  notifications: boolean
  language: string
}

const defaultSettings: Settings = {
  notifications: true,
  language: 'en'
}

const SettingsContext = createContext<{
  settings: Settings
  updateSettings: (updates: Partial<Settings>) => void
} | null>(null)

export function SettingsProvider({ children }: { children: ReactNode }) {
  const [settings, setSettings] = useState<Settings>(defaultSettings)
  const [mounted, setMounted] = useState(false)

  // Load from localStorage on mount
  useEffect(() => {
    const stored = localStorage.getItem('settings')
    if (stored) {
      setSettings(JSON.parse(stored))
    }
    setMounted(true)
  }, [])

  // Persist to localStorage on change
  useEffect(() => {
    if (mounted) {
      localStorage.setItem('settings', JSON.stringify(settings))
    }
  }, [settings, mounted])

  const updateSettings = (updates: Partial<Settings>) => {
    setSettings(prev => ({ ...prev, ...updates }))
  }

  // Prevent hydration mismatch
  if (!mounted) {
    return null
  }

  return (
    <SettingsContext.Provider value={{ settings, updateSettings }}>
      {children}
    </SettingsContext.Provider>
  )
}

export function useSettings() {
  const context = useContext(SettingsContext)
  if (!context) {
    throw new Error('useSettings must be used within SettingsProvider')
  }
  return context
}

Best Practices#

Keep contexts focused - One context per domain (theme, auth, cart)
Split state and actions - Prevent unnecessary re-renders
Memoize values - Use useMemo for complex context values
Handle SSR carefully - Watch for hydration mismatches
Consider alternatives - Use Zustand for complex global state

Zustand - Alternative state management
React Query - Server state management
URL State - URL-based state