Context Performance Pitfalls: Why Every Consumer Re-renders and How to Fix It

Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.

Exercise 1 of 1

Context Re-render Quiz

Three context performance scenarios. Understand all-or-nothing re-renders, why split contexts help, and the object reference trap.

interact to see yellow flashes

const AppContext = createContext(null);

function App() {
  const [user, setUser] = useState({ name: 'Durgesh' });
  const [theme, setTheme] = useState('dark');
  const [count, setCount] = useState(0);

  return (
    <AppContext.Provider value={{ user, theme, count, setCount }}>
      <UserCard />
      <ThemeButton />
      <Counter />
    </AppContext.Provider>
  );
}

// UserCard only uses user from context

When setCount is called, which components re-render?

// Split approach: two separate contexts
const UserContext = createContext(null);
const ThemeContext = createContext(null);

function App() {
  const [user, setUser] = useState({ name: 'Durgesh' });
  const [theme, setTheme] = useState('dark');

  return (
    <UserContext.Provider value={user}>
      <ThemeContext.Provider value={theme}>
        <UserCard />   {/* useContext(UserContext) */}
        <ThemeButton /> {/* useContext(ThemeContext) */}
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
}

When theme changes, which component re-renders?

function App() {
  const [user, setUser] = useState({ name: 'Durgesh' });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Profile />
    </UserContext.Provider>
  );
}

On every App re-render, does Profile re-render even if user hasn't changed?

0/3 answered

💡 Two fixes for context performance: split contexts by update frequency, and memoize the value object so consumers don't re-render when the reference changes but the data has not.

Re-read the lecture All lectures →