React Academy · Lesson

Context Selector Pattern

Implement a simple selector hook that only re-renders when a slice of context changes.

Context Selector Pattern is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will implement a context selector hook that subscribes a component to only a slice of context state, preventing re-renders when unrelated parts of the context change.

The Selector Problem

useContext re-renders when ANY part of the context changes. If a component only needs the user's name but the context also holds a notifications list, adding a notification re-renders the name component unnecessarily.

What Is a Selector?

A selector is a function that extracts a specific piece of state from a larger state object: `state => state.user.name`. A selector hook subscribes to context but only triggers a re-render when the selected value changes.

Simple Selector Hook

Build a useSelector hook that reads context and wraps it in useMemo keyed on the selector's result. The component re-renders only when the selected value changes.

function useAppSelector(selector) {
  const state = useContext(AppCtx);
  return useMemo(() => selector(state), [state, selector]);
}

// Consumer only re-renders when user.name changes
const name = useAppSelector(s => s.user.name);

Shallow Equality Check

useMemo with a selector still re-renders if the selector returns a new object/array reference on every call (e.g. `s => s.items.filter(...)`). Use a shallow-equal comparison to skip re-renders when the content is the same.

import { useRef } from 'react';

function useSelector(selector) {
  const state = useContext(AppCtx);
  const selected = selector(state);
  const ref = useRef(selected);
  if (!shallowEqual(ref.current, selected)) {
    ref.current = selected;
  }
  return ref.current;
}

use-context-selector Library

For production use, the **use-context-selector** library provides a `useContextSelector` hook with efficient subscription and equality checks — without needing external state managers.

import { useContextSelector } from 'use-context-selector';

const name = useContextSelector(AppCtx, s => s.user.name);

Zustand as a Selector-Native Solution

Zustand's `useStore(selector)` hook has built-in selector support with shallow equality out of the box, making it a natural fit for large state trees where fine-grained subscriptions matter.

const name = useAppStore(state => state.user.name);

When Selectors Are Overkill

If context updates are infrequent and consumers are cheap to re-render, selectors add complexity with no measurable benefit. Profile first — always optimise based on evidence.

Memoizing Selector Functions

If you create the selector inline in the component body, it gets a new function reference on every render, potentially breaking memoization. Define selectors outside the component or use useCallback.

// Outside component — stable reference
const selectName = s => s.user.name;

function Profile() {
  const name = useAppSelector(selectName);
  return <p>{name}</p>;
}

Derived Selectors

Compose selectors by calling one from inside another. Derived selectors compute values from base selectors, keeping business logic out of components.

const selectFullName = s => s.user.firstName + ' ' + s.user.lastName;

Quick Check

Why should selector functions be defined outside the component body when used with useContextSelector or useMemo?

Recap

Selectors extract a slice of context state and prevent re-renders when unrelated parts change. Define selectors outside components for stable references. Use use-context-selector or Zustand for production-grade selector support.

Up Next

Next lesson: **When Not to Use Context** — you will learn to recognise when prop passing, composition, or a state manager is a better fit than Context.

Frequently asked questions

Is the “Context Selector Pattern” lesson free?

Yes — the full text of “Context Selector Pattern” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Context Selector Pattern”?

Implement a simple selector hook that only re-renders when a slice of context changes. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Context Selector Pattern” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy