BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

827How Context Triggers Re-renders
828The Scope of Consumer Re-renders
829Context Ignores React.memo
830Reading Context Creates a Subscription
831Multiple Consumers, Multiple Re-renders
832Context Re-renders Are Unavoidable
833Profiling Context Performance Impact
834When Context Re-renders Don't Matter
835When Context Re-renders Hurt
836The False Optimization: Nested Providers
837Measuring Before Optimizing
838The Single Context Anti-Pattern
839Identifying Independent State Domains
840Creating Separate Contexts by Concern
841Co-locating Context with Its Consumers
842The Nested Provider Pattern
843Read-Only vs Write-Only Context Split
844Measuring Impact with React DevTools Profiler
845When Not to Split: Tightly Coupled State
846Splitting Context in Existing Codebases
847Trade-Offs: Complexity vs Performance
848Objects Created Inline Cause All Consumers to Re-render
849The Classic {{ user, setUser }} Trap
850Identifying the Problem: DevTools Profiler
851Solution 1: useMemo the Context Value
852Solution 2: Split Context into Separate Providers
853The useState Setter Stability Guarantee
854When Array Values Need useMemo
855Primitive Values Don't Need Memoization
856The useMemo Dependency Array Trap in Context
857The Selective Subscription Problem
858use-context-selector Library Overview
859Creating a Context with createContext
860useContextSelector Hook
861Selector Stability and Performance
862When the Library is Worth It
863Alternatives: Zustand and Jotai

827How Context Triggers Re-renders
828The Scope of Consumer Re-renders
829Context Ignores React.memo
830Reading Context Creates a Subscription
831Multiple Consumers, Multiple Re-renders
832Context Re-renders Are Unavoidable
833Profiling Context Performance Impact
834When Context Re-renders Don't Matter
835When Context Re-renders Hurt
836The False Optimization: Nested Providers
837Measuring Before Optimizing
838The Single Context Anti-Pattern
839Identifying Independent State Domains
840Creating Separate Contexts by Concern
841Co-locating Context with Its Consumers
842The Nested Provider Pattern
843Read-Only vs Write-Only Context Split
844Measuring Impact with React DevTools Profiler
845When Not to Split: Tightly Coupled State
846Splitting Context in Existing Codebases
847Trade-Offs: Complexity vs Performance
848Objects Created Inline Cause All Consumers to Re-render
849The Classic {{ user, setUser }} Trap
850Identifying the Problem: DevTools Profiler
851Solution 1: useMemo the Context Value
852Solution 2: Split Context into Separate Providers
853The useState Setter Stability Guarantee
854When Array Values Need useMemo
855Primitive Values Don't Need Memoization
856The useMemo Dependency Array Trap in Context
857The Selective Subscription Problem
858use-context-selector Library Overview
859Creating a Context with createContext
860useContextSelector Hook
861Selector Stability and Performance
862When the Library is Worth It
863Alternatives: Zustand and Jotai

Lesson 841 of 2,396·22. Context PerformancePro lesson

Co-locating Context with Its Consumers

Placing context providers close to the subtree that uses them to limit re-render scope.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course