react-context-patterns

name	react-context-patterns
user-invocable	false
description	Use when React Context patterns for state management. Use when sharing state across component trees without prop drilling.
allowed-tools	["Bash","Read"]

React Context Patterns

Master react context patterns for building high-performance, scalable React applications with industry best practices.

Understanding Prop Drilling vs Context

Prop drilling occurs when you pass props through multiple layers of components that don't need them, just to reach a deeply nested component.

// Prop Drilling (AVOID)
function App() {
  const [user, setUser] = useState<User | null>(null);
  return <Layout user={user} setUser={setUser} />;
}

function Layout({ user, setUser }: Props) {
  // Layout doesn't use user, just passes it down
  return <Sidebar user={user} setUser={setUser} />;
}

function Sidebar({ user, setUser }: Props) {
  // Sidebar doesn't use user, just passes it down
  return <UserMenu user={user} setUser={setUser} />;
}

function UserMenu({ user, setUser }: Props) {
  // Finally used here
  return <div>{user?.name}</div>;
}

Context solves this by providing a way to share values between components without explicitly passing props through every level:

// Using Context (BETTER)
const UserContext = createContext<UserContextType | undefined>(undefined);

function App() {
  const [user, setUser] = useState<User | null>(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Layout />
    </UserContext.Provider>
  );
}

function Layout() {
  return <Sidebar />; // No props needed
}

function Sidebar() {
  return <UserMenu />; // No props needed
}

function UserMenu() {
  const { user } = useContext(UserContext);
  return <div>{user?.name}</div>;
}

Creating and Using Context with TypeScript

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

interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  isAuthenticated: boolean;
  isLoading: boolean;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const  =  () => {
    ();
     {
       user =  api.(email, password);
      (user);
    }  (error) {
      .(, error);
       error;
    }  {
      ();
    }
  };

    = () => {
    ();
    api.();
  };

   value = {
    user,
    login,
    logout,
    : user !== ,
    isLoading
  };

   ;
}

  () {
   context = ();
   (!context) {
      ();
  }
   context;
}

Context with useReducer for Complex State

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

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

interface State {
  items: CartItem[];
  total: number;
}

type Action =
  | { type: 'ADD_ITEM'; payload: CartItem }
  | { type: 'REMOVE_ITEM'; payload: string }
  | { type: 'UPDATE_QUANTITY'; payload: { id: string; quantity: number } }
  | { type: 'CLEAR_CART' };

const CartContext = createContext<{
  state: State;
  dispatch: React.Dispatch<Action>;
} | undefined>(undefined);

function cartReducer(state: State, : ):  {
   (action.) {
     : {
       existingItem = state..( i. === action..);
       (existingItem) {
         {
          : state..(
            i. === action..
              ? { ...i, : i. + action.. }
              : i
          ),
          : state. + action.. * action..
        };
      }
       {
        : [...state., action.],
        : state. + action.. * action..
      };
    }
     : {
       item = state..( i. === action.);
       {
        : state..( i. !== action.),
        : state. - (item ? item. * item. : )
      };
    }
     : {
       item = state..( i. === action..);
       (!item)  state;
       priceDiff = item. * (action.. - item.);
       {
        : state..(
          i. === action..
            ? { ...i, : action.. }
            : i
        ),
        : state. + priceDiff
      };
    }
     :
       { : [], :  };
    :
       state;
  }
}

  () {
   [state, dispatch] = (cartReducer, {
    : [],
    : 
  });

   (
    
  );
}

  () {
   context = ();
   (!context)   ();
   context;
}


  () {
   { dispatch } = ();

   {
    :  ({ : , : item }),
    :  ({ : , : id }),
    : 
      ({ : , : { id, quantity } }),
    :  ({ :  })
  };
}

Multiple Context Composition

import { ReactNode } from 'react';

// Compose multiple providers
export function AppProviders({ children }: { children: ReactNode }) {
  return (
    <AuthProvider>
      <ThemeProvider>
        <CartProvider>
          <NotificationProvider>
            {children}
          </NotificationProvider>
        </CartProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

// Usage in main app
function App() {
  return (
    <AppProviders>
      <Router />
    </AppProviders>
  );
}

Performance Optimization: Splitting Context

Split read and write operations to prevent unnecessary re-renders:

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

// Separate read and write contexts
const UserStateContext = createContext<User | null>(null);
const UserDispatchContext = createContext<{
  setUser: (user: User | null) => void;
} | undefined>(undefined);

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

  // Memoize dispatch to prevent re-renders
  const dispatch = useMemo(() => ({ setUser }), []);

  return (
    <UserStateContext.Provider value={user}>
      <UserDispatchContext.Provider value={dispatch}>
        {children}
      </UserDispatchContext.Provider>
    </UserStateContext.Provider>
  );
}

// Components only re-render when they use state that changes
export function () {
   context = ();
   context; 
}

  () {
   context = ();
   (!context) {
      ();
  }
   context;
}

Context with useMemo for Value Stability

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

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
  primaryColor: string;
  secondaryColor: string;
}

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

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

  // Memoize value to prevent unnecessary re-renders
  const value = useMemo(() => ({
    theme,
    toggleTheme: () => setTheme(t => t === 'light' ? 'dark' : 'light'),
    primaryColor: theme === 'light' ? '#000000' : '#ffffff',
    secondaryColor: theme === 'light' ? '#666666' : '#cccccc'
  }), [theme]);

  return (
    
  );
}

  () {
   context = ();
   (!context)   ();
   context;
}

Context with Local Storage Persistence

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

interface Settings {
  notifications: boolean;
  language: string;
  timezone: string;
}

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

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

export function SettingsProvider({ children }: { children: ReactNode }) {
  const [settings, setSettings] = useState<Settings>(() => {
    // Initialize from localStorage
    const stored = localStorage.getItem('settings');
    return stored ? JSON.parse(stored) : defaultSettings;
  });

  // Persist to localStorage on change
  ( {
    .(, .(settings));
  }, [settings]);

    = () => {
    ( ({ ...prev, ...updates }));
  };

   value = { settings, updateSettings };

   (
    
  );
}

  () {
   context = ();
   (!context) {
      ();
  }
   context;
}

Context for Feature Flags

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

interface FeatureFlags {
  newDashboard: boolean;
  betaFeatures: boolean;
  experimentalUI: boolean;
}

const FeatureFlagsContext = createContext<FeatureFlags | undefined>(undefined);

export function FeatureFlagsProvider({
  children,
  flags
}: {
  children: ReactNode;
  flags: FeatureFlags;
}) {
  return (
    <FeatureFlagsContext.Provider value={flags}>
      {children}
    </FeatureFlagsContext.Provider>
  );
}

export function useFeatureFlags() {
  const context = useContext(FeatureFlagsContext);
  if (!context) {
    throw new Error('useFeatureFlags must be used within FeatureFlagsProvider');
  }
  return context;
}

export function useFeatureFlag(flag: keyof FeatureFlags): boolean {
  const flags = ();
   flags[flag];
}


 () {
   flags = (); 
   (
    
  );
}

 () {
   newDashboard = ();
   newDashboard ?  : ;
}

Context for Notifications/Toast System

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

interface Notification {
  id: string;
  type: 'success' | 'error' | 'info' | 'warning';
  message: string;
  duration?: number;
}

interface NotificationContextType {
  notifications: Notification[];
  addNotification: (notification: Omit<Notification, 'id'>) => void;
  removeNotification: (id: string) => void;
}

const NotificationContext = createContext<NotificationContextType | undefined>(
  undefined
);

export function NotificationProvider({ children }: { children: ReactNode }) {
  const [notifications, setNotifications] = useState<Notification[]>([]);

  const addNotification = useCallback(
    (notification: <, >) => {
       id = .().().(, );
       newNotification = { ...notification, id };

      ( [...prev, newNotification]);

      
       (notification. !== ) {
        ( {
          (id);
        }, notification. || );
      }
    },
    []
  );

   removeNotification = ( {
    ( prev.( n. !== id));
  }, []);

   value = { notifications, addNotification, removeNotification };

   (
    
  );
}

  () {
   context = ();
   (!context) {
      ();
  }
   context;
}

 () {
   { notifications, removeNotification } = ();

   (
    
  );
}

Context for Modal Management

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

interface ModalContextType {
  isOpen: boolean;
  modalContent: ReactNode | null;
  openModal: (content: ReactNode) => void;
  closeModal: () => void;
}

const ModalContext = createContext<ModalContextType | undefined>(undefined);

export function ModalProvider({ children }: { children: ReactNode }) {
  const [isOpen, setIsOpen] = useState(false);
  const [modalContent, setModalContent] = useState<ReactNode | null>(null);

  const openModal = useCallback((content: ReactNode) => {
    setModalContent(content);
    setIsOpen(true);
  }, []);

  const closeModal = useCallback(() => {
    setIsOpen(false);
    
    ( (), );
  }, []);

   value = { isOpen, modalContent, openModal, closeModal };

   (
    
  );
}

  () {
   context = ();
   (!context) {
      ();
  }
   context;
}


 () {
   { openModal } = ();

    = () => {
    ();
  };

   ;
}

Context for Form State Management

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

interface FormData {
  [key: string]: any;
}

interface FormContextType {
  formData: FormData;
  errors: Record<string, string>;
  setFieldValue: (field: string, value: any) => void;
  setFieldError: (field: string, error: string) => void;
  clearErrors: () => void;
  resetForm: () => void;
}

const FormContext = createContext<FormContextType | undefined>(undefined);

export function FormProvider({
  children,
  initialValues = {}
}: {
  children: ReactNode;
  initialValues?: FormData;
}) {
  const [formData, setFormData] = useState<FormData>(initialValues);
  const [errors, setErrors] = useState<Record<, >>({});

    = () => {
    ( ({ ...prev, [field]: value }));
    
     (errors[field]) {
      ( {
         newErrors = { ...prev };
         newErrors[field];
         newErrors;
      });
    }
  };

    = () => {
    ( ({ ...prev, [field]: error }));
  };

    = () => ({});

    = () => {
    (initialValues);
    ({});
  };

   value = {
    formData,
    errors,
    setFieldValue,
    setFieldError,
    clearErrors,
    resetForm
  };

   ;
}

  () {
   context = ();
   (!context) {
      ();
  }
   context;
}


 () {
   (
    
  );
}

 () {
   { formData, errors, setFieldValue } = ();

   (
    
  );
}

Testing Context Providers

import { render, screen } from '@testing-library/react';
import { AuthProvider, useAuth } from './AuthContext';

function TestComponent() {
  const { user, isAuthenticated } = useAuth();
  return (
    <div>
      <div data-testid="authenticated">{isAuthenticated.toString()}</div>
      <div data-testid="user">{user?.name || 'None'}</div>
    </div>
  );
}

describe('AuthProvider', () => {
  it('provides authentication state', () => {
    render(
      <AuthProvider>
        <TestComponent />
      </AuthProvider>
    );

    expect(screen.getByTestId('authenticated')).toHaveTextContent('false');
    expect(screen.getByTestId('user')).toHaveTextContent('None');
  });

  (,  {
    
     spy = jest.(, ).();

    ( {
      ();
    }).();

    spy.();
  });
});

When to Use This Skill

Use react-context-patterns when you need to:

• Share state across many components without prop drilling
• Implement global application state (auth, theme, etc.)
• Build provider patterns for complex features
• Create compound components with shared state
• Manage deeply nested component communication
• Implement feature-specific state management
• Build scalable React applications
• Avoid excessive prop passing
• Create reusable context patterns
• Manage cross-cutting concerns (notifications, modals, etc.)

Best Practices

1. Split contexts by concern - Create separate contexts for auth, theme, cart, etc. Don't combine unrelated state.

2. Memoize context values - Use useMemo to prevent unnecessary re-renders when the provider re-renders.

3. Provide custom hooks - Always create a custom hook like useAuth() instead of exposing useContext() directly.

4. Throw errors outside provider - Ensure context is used within the correct provider boundary.

5. Use TypeScript - Define proper types for context values to catch errors at compile time.

6. Keep values stable - Avoid creating new objects/functions on every render. Use useMemo and useCallback.

7. Split read and write contexts - For performance-critical applications, separate state and dispatch contexts.

8. Document context usage - Clearly document what each context provides and when to use it.

9. Test thoroughly - Write tests for providers, custom hooks, and error cases.

10. Consider alternatives - Don't use Context for everything. Local state, prop passing, or state management libraries might be better for some cases.

Common Pitfalls

1. Creating too many contexts - Context hell is as bad as prop drilling. Group related state together.

2. Not memoizing values - Every provider re-render causes all consumers to re-render if values aren't memoized.

3. Using context for all state - Local state is simpler and more performant for component-specific state.

4. Forgetting error boundaries - Always check if context exists in custom hooks to provide helpful error messages.

5. Not providing defaults - Always handle the undefined case when context might not be available.

6. Overusing for performance - Context causes all consumers to re-render. For frequently changing values, consider alternatives.

7. Not splitting operations - Separating read and write can significantly improve performance.

8. Creating unstable values - Defining objects or functions inline in the provider causes unnecessary re-renders.

9. Using for high-frequency updates - Context isn't optimized for values that change many times per second.

10. Not considering composition - Sometimes lifting state up or using composition patterns is simpler than context.

Resources

• React Documentation - Context
• React Performance Guide
• React Patterns
• Kent C. Dodds - Application State Management
• React TypeScript Cheatsheet