State Management · Middle · Question 6 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 each time, and React compares it with Object.is
2Context always re-renders consumers on every render of the app
3Functions can't be passed through context, so React re-creates them

Explanation

A new object literal is never equal to the previous one. Memoize: const value = useMemo(() => ({ user, login, logout }), [user, login, logout]) with useCallback for the functions (the React Compiler can do this automatically).

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

Explanation

Further reading

Problem with a question

Test yourself