React Context Optimization

Context can cause unnecessary re-renders if not used carefully. Here's how to optimize it.

The Problem#

// Bad: All consumers re-render when any value changes
interface AppState {
  user: User | null;
  theme: 'light' | 'dark';
  notifications: Notification[];
  settings: Settings;
}

const AppContext = createContext<AppState>(null!);

function AppProvider({ children }: { children: React.ReactNode }) {
  const [state, setState] = useState<AppState>({
    user: null,
    theme: 'light',
    notifications: [],
    settings: defaultSettings,
  });

  // Every state change re-renders ALL consumers
  return (
    <AppContext.Provider value={state}>
      {children}
    </AppContext.Provider>
  );
}

// UserProfile re-renders when notifications change!
function UserProfile() {
  const { user } = useContext(AppContext);
  return <div>{user?.name}</div>;
}

Split Contexts#

// Good: Separate contexts for separate concerns
const UserContext = createContext<User | null>(null);
const ThemeContext = createContext<'light' | 'dark'>('light');
const NotificationsContext = createContext<Notification[]>([]);

function AppProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  const [notifications, setNotifications] = useState<Notification[]>([]);

  return (
    <UserContext.Provider value={user}>
      <ThemeContext.Provider value={theme}>
        <NotificationsContext.Provider value={notifications}>
          {children}
        </NotificationsContext.Provider>
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
}

// Now UserProfile only re-renders when user changes
function UserProfile() {
  const user = useContext(UserContext);
  return <div>{user?.name}</div>;
}

// Custom hooks for cleaner API
function useUser() {
  const context = useContext(UserContext);
  if (context === undefined) {
    throw new Error('useUser must be used within UserProvider');
  }
  return context;
}

Separate State and Dispatch#

// Separate read and write contexts
interface State {
  count: number;
  items: string[];
}

type Action =
  | { type: 'INCREMENT' }
  | { type: 'ADD_ITEM'; payload: string };

const StateContext = createContext<State>(null!);
const DispatchContext = createContext<React.Dispatch<Action>>(null!);

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'ADD_ITEM':
      return { ...state, items: [...state.items, action.payload] };
    default:
      return state;
  }
}

function Provider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(reducer, {
    count: 0,
    items: [],
  });

  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
}

// Components that only dispatch don't re-render on state change
function AddButton() {
  const dispatch = useContext(DispatchContext);

  return (
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
      Add
    </button>
  );
}

// Components that read state re-render when state changes
function Counter() {
  const { count } = useContext(StateContext);
  return <span>{count}</span>;
}

Memoize Provider Value#

// Bad: New object on every render
function BadProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  // This creates a new object every render
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// Good: Memoized value
function GoodProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const value = useMemo(
    () => ({ user, setUser }),
    [user]
  );

  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  );
}

// Or split into state and actions
function BetterProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  // Actions never change
  const actions = useMemo(() => ({
    login: (userData: User) => setUser(userData),
    logout: () => setUser(null),
  }), []);

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

Selector Pattern#

// Create a selector hook to pick specific values
function useContextSelector<T, R>(
  context: React.Context<T>,
  selector: (value: T) => R
): R {
  const value = useContext(context);
  const selectedRef = useRef(selector(value));
  const [, forceRender] = useReducer((x) => x + 1, 0);

  useEffect(() => {
    const newSelected = selector(value);
    if (!Object.is(selectedRef.current, newSelected)) {
      selectedRef.current = newSelected;
      forceRender();
    }
  }, [value, selector]);

  return selectedRef.current;
}

// Or use external library: use-context-selector
import { createContext, useContextSelector } from 'use-context-selector';

const AppContext = createContext<AppState>(null!);

function UserName() {
  // Only re-renders when user.name changes
  const userName = useContextSelector(
    AppContext,
    (state) => state.user?.name
  );

  return <span>{userName}</span>;
}

function NotificationCount() {
  // Only re-renders when notifications length changes
  const count = useContextSelector(
    AppContext,
    (state) => state.notifications.length
  );

  return <span>{count}</span>;
}

Compound Components#

// Context for compound components
interface TabsContextValue {
  activeTab: string;
  setActiveTab: (id: string) => void;
}

const TabsContext = createContext<TabsContextValue | null>(null);

function Tabs({ children, defaultTab }: {
  children: React.ReactNode;
  defaultTab: string;
}) {
  const [activeTab, setActiveTab] = useState(defaultTab);

  const value = useMemo(
    () => ({ activeTab, setActiveTab }),
    [activeTab]
  );

  return (
    <TabsContext.Provider value={value}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

const TabButton = memo(function TabButton({
  id,
  children,
}: {
  id: string;
  children: React.ReactNode;
}) {
  const context = useContext(TabsContext);
  if (!context) throw new Error('TabButton must be used within Tabs');

  const { activeTab, setActiveTab } = context;
  const isActive = activeTab === id;

  return (
    <button
      className={isActive ? 'active' : ''}
      onClick={() => setActiveTab(id)}
    >
      {children}
    </button>
  );
});

const TabPanel = memo(function TabPanel({
  id,
  children,
}: {
  id: string;
  children: React.ReactNode;
}) {
  const context = useContext(TabsContext);
  if (!context) throw new Error('TabPanel must be used within Tabs');

  const { activeTab } = context;

  if (activeTab !== id) return null;

  return <div className="tab-panel">{children}</div>;
});

Tabs.Button = TabButton;
Tabs.Panel = TabPanel;

Preventing Child Re-renders#

// Children re-render with provider
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={count}>
      {/* These re-render when count changes */}
      <ChildA />
      <ChildB />
    </CountContext.Provider>
  );
}

// Solution 1: Pass children as props
function CountProvider({ children }: { children: React.ReactNode }) {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={count}>
      {children}
    </CountContext.Provider>
  );
}

function App() {
  return (
    <CountProvider>
      {/* These don't re-render */}
      <ChildA />
      <ChildB />
    </CountProvider>
  );
}

// Solution 2: Memoize children
function Parent() {
  const [count, setCount] = useState(0);

  const children = useMemo(() => (
    <>
      <ChildA />
      <ChildB />
    </>
  ), []);

  return (
    <CountContext.Provider value={count}>
      {children}
    </CountContext.Provider>
  );
}

// Solution 3: Use React.memo
const ChildA = memo(function ChildA() {
  // Only re-renders if props change
  return <div>Child A</div>;
});

Context with Immer#

import { useImmerReducer } from 'use-immer';

interface State {
  users: User[];
  selectedId: string | null;
}

type Action =
  | { type: 'ADD_USER'; user: User }
  | { type: 'UPDATE_USER'; id: string; updates: Partial<User> }
  | { type: 'SELECT_USER'; id: string };

function reducer(draft: State, action: Action) {
  switch (action.type) {
    case 'ADD_USER':
      draft.users.push(action.user);
      break;
    case 'UPDATE_USER':
      const user = draft.users.find(u => u.id === action.id);
      if (user) Object.assign(user, action.updates);
      break;
    case 'SELECT_USER':
      draft.selectedId = action.id;
      break;
  }
}

function UsersProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useImmerReducer(reducer, {
    users: [],
    selectedId: null,
  });

  return (
    <UsersStateContext.Provider value={state}>
      <UsersDispatchContext.Provider value={dispatch}>
        {children}
      </UsersDispatchContext.Provider>
    </UsersStateContext.Provider>
  );
}

Testing Context#

// Create a test wrapper
function createTestWrapper(initialState?: Partial<AppState>) {
  return function TestWrapper({ children }: { children: React.ReactNode }) {
    return (
      <AppProvider initialState={{ ...defaultState, ...initialState }}>
        {children}
      </AppProvider>
    );
  };
}

// Use in tests
import { renderHook } from '@testing-library/react';

test('useUser returns user', () => {
  const wrapper = createTestWrapper({
    user: { id: '1', name: 'Alice' },
  });

  const { result } = renderHook(() => useUser(), { wrapper });

  expect(result.current.name).toBe('Alice');
});

Best Practices#

Structure:
✓ Split contexts by update frequency
✓ Separate state and dispatch
✓ Keep contexts focused
✓ Use custom hooks for access

Performance:
✓ Memoize provider values
✓ Use selectors for granular access
✓ Prevent unnecessary re-renders
✓ Profile with React DevTools

Patterns:
✓ Create context factories
✓ Use compound components
✓ Provide meaningful defaults
✓ Handle missing providers

Organization:
✓ Co-locate context with components
✓ Export hooks, not contexts
✓ Document context shape
✓ Test providers separately

Context optimization prevents unnecessary re-renders. Split contexts by concern, separate state from dispatch, memoize values, and use selectors for granular access. Profile with React DevTools to identify performance issues and apply these patterns strategically.