🌍Context API

Context passes data through the component tree without prop drilling. Not a state manager — any value change re-renders all consumers.

Memory Trick

Context = Global READ access. Not state management. Every consumer re-renders when value changes.

1️⃣ How it works

jsx
// Create
const ThemeContext = createContext('light');

// Provide
<ThemeContext.Provider value={theme}>
  <App />
</ThemeContext.Provider>

// Consume
const theme = useContext(ThemeContext);

When Provider value changes → all consumers re-render, regardless of whether they use the changed part.

2️⃣ Context vs Redux

	Context API	Redux
Purpose	Dependency injection	State management
Re-renders	All consumers	Only subscribed selectors
DevTools	Limited	Rich time-travel
Best for	Theme, auth, locale	Complex, frequent global state

Context is not a Redux replacement for high-churn data.

3️⃣ Optimizing Context

Problem: Passing objects creates new reference every render.

jsx
// Bad — new object every render
<Ctx.Provider value={{ user, setUser }}>

// Good — memoized
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>

Also: Split contexts — don't put unrelated values in one context.

Was this helpful?

Found an issue? Report here

Test your Knowledge

1 questions to cement what you just learned.