Code QuizIntermediate

Inline Context Value Re-renders

Spot why passing an inline object as context value causes wasteful re-renders.

Codejavascript

const UserContext = createContext(null);

function App() {
  const [user, setUser] = useState(null);
  const [count, setCount] = useState(0);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <Dashboard />
    </UserContext.Provider>
  );
}

What causes every consumer of UserContext to re-render whenever the button is clicked?

← PreviousInverted Guard in Custom Context Hook Next →Reducer Missing Default Case