FrontendHaltReact·Intermediate·Coding·1 min read
Why can an inline object provider value be expensive?
Short interview answer
A new object has a new identity on every provider render, so consumers see a changed context even if its fields are equal. Memoizing can stabilize identity, but the better first step is splitting contexts by responsibility and update frequency.
Example
// New object every render -> every consumer re-renders<Ctx.Provider value={{ user, setUser }}>
// Stable identity while inputs are unchangedconst value = useMemo(() => ({ user, setUser }), [user]);<Ctx.Provider value={value}>Key takeaway
Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.