React · Middle · Question 21 of 75

Why do all context consumers re-render on every provider render?

<AuthContext value={{ user, login, logout }}>
  {children}
</AuthContext>

✓Correct answer: value is a new object on every provider render
2Context always wakes up all consumers; this can't be changed
3The login and logout functions can't be put into context

Explanation

React compares value via Object.is. An object literal is always new, so every provider render wakes up all consumers. The fix is useMemo for the value (and useCallback for functions), or splitting the context into parts.

Why do all context consumers re-render on every provider render?

Explanation

Further reading

Problem with a question

Test yourself