Memoizing Context Values with useMemo
Wrap context value objects in useMemo so consumers don't re-render unnecessarily.
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>All lessons in this course
- Splitting Contexts to Limit Re-renders
- Memoizing Context Values with useMemo
- Context Selector Pattern
- When Not to Use Context