React Context Selectors Pattern

Context causes re-renders for all consumers on any change. Here's how to optimize with selectors.

The Problem#

// Every context change re-renders all consumers
interface AppState {
  user: User | null;
  theme: 'light' | 'dark';
  notifications: Notification[];
  settings: Settings;
}

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

function App() {
  const [state, setState] = useState<AppState>(initialState);

  return (
    <AppContext.Provider value={state}>
      <Header />      {/* Re-renders on any state change */}
      <Sidebar />     {/* Re-renders on any state change */}
      <MainContent /> {/* Re-renders on any state change */}
    </AppContext.Provider>
  );
}

// Header only needs user, but re-renders when notifications change
function Header() {
  const state = useContext(AppContext);
  return <div>Welcome, {state?.user?.name}</div>;
}

Solution 1: Split Contexts#

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

function AppProviders({ 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>
  );
}

// Components only subscribe to what they need
function Header() {
  const user = useContext(UserContext);
  // Only re-renders when user changes
  return <div>Welcome, {user?.name}</div>;
}

function NotificationBadge() {
  const notifications = useContext(NotificationsContext);
  // Only re-renders when notifications change
  return <span>{notifications.length}</span>;
}

Solution 2: Selector Hook with useSyncExternalStore#

import { useSyncExternalStore } from 'react';

// Store implementation
type Listener = () => void;

function createStore<T>(initialState: T) {
  let state = initialState;
  const listeners = new Set<Listener>();

  return {
    getState: () => state,
    setState: (partial: Partial<T> | ((state: T) => Partial<T>)) => {
      const nextPartial = typeof partial === 'function'
        ? partial(state)
        : partial;
      state = { ...state, ...nextPartial };
      listeners.forEach(listener => listener());
    },
    subscribe: (listener: Listener) => {
      listeners.add(listener);
      return () => listeners.delete(listener);
    },
  };
}

// Create store
const store = createStore<AppState>(initialState);

// Selector hook
function useStoreSelector<T>(selector: (state: AppState) => T): T {
  return useSyncExternalStore(
    store.subscribe,
    () => selector(store.getState()),
    () => selector(store.getState())
  );
}

// Usage - only re-renders when selected value changes
function Header() {
  const userName = useStoreSelector(state => state.user?.name);
  return <div>Welcome, {userName}</div>;
}

function NotificationCount() {
  const count = useStoreSelector(state => state.notifications.length);
  return <span>{count}</span>;
}

Solution 3: Context with Ref and Subscription#

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

type Subscriber<T> = (state: T) => void;

interface StoreContext<T> {
  getState: () => T;
  subscribe: (subscriber: Subscriber<T>) => () => void;
  setState: (update: Partial<T> | ((state: T) => Partial<T>)) => void;
}

function createContextStore<T>(initialState: T) {
  const Context = createContext<StoreContext<T> | null>(null);

  function Provider({ children }: { children: React.ReactNode }) {
    const stateRef = useRef(initialState);
    const subscribersRef = useRef(new Set<Subscriber<T>>());

    const store = useRef<StoreContext<T>>({
      getState: () => stateRef.current,
      subscribe: (subscriber) => {
        subscribersRef.current.add(subscriber);
        return () => subscribersRef.current.delete(subscriber);
      },
      setState: (update) => {
        const nextPartial = typeof update === 'function'
          ? update(stateRef.current)
          : update;
        stateRef.current = { ...stateRef.current, ...nextPartial };
        subscribersRef.current.forEach(sub => sub(stateRef.current));
      },
    }).current;

    return <Context.Provider value={store}>{children}</Context.Provider>;
  }

  function useSelector<R>(selector: (state: T) => R): R {
    const store = useContext(Context);
    if (!store) throw new Error('Provider required');

    const [selected, setSelected] = useState(() =>
      selector(store.getState())
    );

    useEffect(() => {
      return store.subscribe((state) => {
        const nextSelected = selector(state);
        setSelected(prev => {
          // Only update if value changed
          return Object.is(prev, nextSelected) ? prev : nextSelected;
        });
      });
    }, [store, selector]);

    return selected;
  }

  function useStore() {
    const store = useContext(Context);
    if (!store) throw new Error('Provider required');
    return store;
  }

  return { Provider, useSelector, useStore };
}

// Usage
const { Provider, useSelector, useStore } = createContextStore<AppState>(initialState);

function UserName() {
  const name = useSelector(state => state.user?.name);
  return <span>{name}</span>;
}

function ThemeToggle() {
  const theme = useSelector(state => state.theme);
  const store = useStore();

  return (
    <button onClick={() => store.setState({
      theme: theme === 'light' ? 'dark' : 'light'
    })}>
      {theme}
    </button>
  );
}

Solution 4: Memoized Context Value#

// Memoize context value to prevent reference changes
function AppProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  // Memoize the context value
  const value = useMemo(() => ({
    user,
    theme,
    setUser,
    setTheme,
  }), [user, theme]);

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

// Memoize consumers that don't need all values
const Header = memo(function Header() {
  const { user } = useContext(AppContext);
  return <div>Welcome, {user?.name}</div>;
});

Solution 5: Higher-Order Component Selector#

function withSelector<T, P extends object>(
  selector: (state: AppState) => T,
  Component: React.ComponentType<P & { data: T }>
) {
  return function WrappedComponent(props: P) {
    const data = useSelector(selector);
    return <Component {...props} data={data} />;
  };
}

// Usage
interface HeaderProps {
  data: { userName: string | undefined };
}

function HeaderBase({ data }: HeaderProps) {
  return <div>Welcome, {data.userName}</div>;
}

const Header = withSelector(
  state => ({ userName: state.user?.name }),
  HeaderBase
);

Zustand-Style Implementation#

import { useSyncExternalStore } from 'react';

type SetState<T> = (
  partial: Partial<T> | ((state: T) => Partial<T>)
) => void;

type GetState<T> = () => T;

type StoreApi<T> = {
  getState: GetState<T>;
  setState: SetState<T>;
  subscribe: (listener: () => void) => () => void;
};

function create<T>(
  createState: (set: SetState<T>, get: GetState<T>) => T
): StoreApi<T> & { useStore: <U>(selector: (state: T) => U) => U } {
  let state: T;
  const listeners = new Set<() => void>();

  const getState: GetState<T> = () => state;

  const setState: SetState<T> = (partial) => {
    const nextPartial = typeof partial === 'function'
      ? partial(state)
      : partial;
    state = { ...state, ...nextPartial };
    listeners.forEach((listener) => listener());
  };

  const subscribe = (listener: () => void) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  state = createState(setState, getState);

  const useStore = <U,>(selector: (state: T) => U): U => {
    return useSyncExternalStore(
      subscribe,
      () => selector(state),
      () => selector(state)
    );
  };

  return { getState, setState, subscribe, useStore };
}

// Usage
const useAppStore = create<AppState>((set, get) => ({
  user: null,
  theme: 'light',
  notifications: [],

  login: async (credentials) => {
    const user = await api.login(credentials);
    set({ user });
  },

  toggleTheme: () => {
    set({ theme: get().theme === 'light' ? 'dark' : 'light' });
  },

  addNotification: (notification) => {
    set({ notifications: [...get().notifications, notification] });
  },
}));

// Components with selectors
function UserName() {
  const name = useAppStore.useStore(state => state.user?.name);
  return <span>{name}</span>;
}

function ThemeToggle() {
  const theme = useAppStore.useStore(state => state.theme);
  const toggleTheme = useAppStore.useStore(state => state.toggleTheme);

  return <button onClick={toggleTheme}>{theme}</button>;
}

Performance Comparison#

// Without selectors: All components re-render
<AppContext.Provider value={{ user, theme, notifications }}>
  <Header />           {/* Re-renders on any change */}
  <NotificationList /> {/* Re-renders on any change */}
  <ThemeToggle />      {/* Re-renders on any change */}
</AppContext.Provider>

// With selectors: Only affected components re-render
function Header() {
  const user = useSelector(state => state.user);
  // Only re-renders when user changes
}

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

Best Practices#

Strategies:
✓ Split contexts by update frequency
✓ Use selectors for granular subscriptions
✓ Memoize context values
✓ Consider external state libraries

Performance:
✓ Keep selectors simple
✓ Return primitive values when possible
✓ Use shallow comparison
✓ Avoid creating objects in selectors

Libraries:
✓ Zustand for simple state
✓ Jotai for atomic state
✓ use-context-selector for existing contexts
✓ React Query for server state

Context selectors prevent unnecessary re-renders by subscribing to specific state slices. Split contexts for different domains, use useSyncExternalStore for selector patterns, or adopt libraries like Zustand. The right approach depends on your app's complexity and update patterns.