React Academy · Lesson

Memoizing Context Values with useMemo

Wrap context value objects in useMemo so consumers don't re-render unnecessarily.

Memoizing Context Values with useMemo is a free React Academy lesson on CoddyKit — lesson 2 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 learn why context value objects must be memoized with useMemo, and how to correctly set up dependencies to avoid unnecessary re-renders.

The Object Reference Problem

Every time a Provider component re-renders, a new object literal `{ ... }` is created as the context value — even if the contents are the same. All consumers re-render because the reference changed.

// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

Fixing with useMemo

Wrap the context value in useMemo so the same object reference is returned between renders when nothing in the deps array has changed.

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

<UserCtx.Provider value={value}>
  {children}
</UserCtx.Provider>

Choosing Dependencies Carefully

Include every value used inside useMemo in the deps array. Missing deps cause stale values. Include primitive props (strings, numbers) and stable references (functions wrapped in useCallback).

Stable Functions with useCallback

Function values change reference on every render. Wrap them in useCallback before including them in a useMemo context value to prevent unnecessary re-renders.

const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

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

When Memoization Is Unnecessary

If the Provider component never re-renders (e.g. it is at the very top of the tree and its parent never changes), useMemo adds overhead with no benefit. Only memoize when the Provider itself re-renders.

Primitive Values Are Already Stable

If your context value is a primitive (string, number, boolean), you do NOT need useMemo — primitives are compared by value, not reference. `value={isDark}` will not cause extra re-renders.

// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

Profiling the Effect of Memoization

Use the React DevTools Profiler to verify that wrapping context value in useMemo actually reduces re-renders. Record a session before and after to see the difference in commit counts.

Nested Memoized Contexts

When multiple contexts are nested, memoize each independently. Changes in one context will not affect the memoized value of another.

The Provider Component Pattern

Encapsulate the context, state, and memoization inside a dedicated Provider component. Export a custom hook for consuming the context. This is the canonical pattern for reusable contexts.

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const logout = useCallback(() => setUser(null), []);
  const value = useMemo(() => ({ user, logout }), [user, logout]);
  return <UserCtx.Provider value={value}>{children}</UserCtx.Provider>;
}

export const useUser = () => useContext(UserCtx);

Quick Check

What is the primary reason to wrap a context value object in useMemo?

Recap

Wrap context value objects in useMemo with correct deps. Stabilise function values with useCallback. Primitives don't need memoization. Encapsulate context setup in a Provider component with a custom hook.

Up Next

Next lesson: **Context Selector Pattern** — you will implement a selector hook that re-renders consumers only when a specific slice of context changes.

Frequently asked questions

Is the “Memoizing Context Values with useMemo” lesson free?

Yes — the full text of “Memoizing Context Values with useMemo” 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 “Memoizing Context Values with useMemo”?

Wrap context value objects in useMemo so consumers don't re-render unnecessarily. 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 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Memoizing Context Values with useMemo” 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