Quiz: What Renders?

Test Your Rendering Intuition

Think you know when React re-renders? Let's find out. Each question below shows a React component tree and asks: does this component re-render? Don't guess — trace the rendering rules:

1. State changes trigger a re-render of the component that owns the state
2. When a component re-renders, all of its children re-render (unless memoized)
3. React bails out if setState receives the same value (Object.is comparison)
4. Context consumers re-render when the context value changes

If you score below 6 out of 8, go back to the state, props, and context lessons. No shame in it — these are the questions that trip up even experienced developers.

---

Question 1: Parent State Change

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <Child />
    </div>
  );
}

function Child() {
  console.log('Child rendered');
  return <p>I am a child</p>;
}

---

Question 2: Same State Value

function Counter() {
  const [count, setCount] = useState(0);
  console.log('Counter rendered');

  return (
    <button onClick={() => setCount(0)}>
      Count: {count}
    </button>
  );
}

---

Question 3: Children as Props

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <Wrapper>
        <ExpensiveChild />
      </Wrapper>
    </div>
  );
}

function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

function ExpensiveChild() {
  console.log('ExpensiveChild rendered');
  return <p>Expensive</p>;
}

---

Question 4: Lifting State Up

function App() {
  return (
    <div>
      <Counter />
      <StaticContent />
    </div>
  );
}

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

function StaticContent() {
  console.log('StaticContent rendered');
  return <p>I never change</p>;
}

---

Question 5: Context Consumer

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('light');
  const [count, setCount] = useState(0);

  return (
    <ThemeContext.Provider value={theme}>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

const ThemedButton = React.memo(function ThemedButton() {
  const theme = useContext(ThemeContext);
  console.log('ThemedButton rendered');
  return <button className={theme}>Themed</button>;
});

---

Question 6: Object State

function Profile() {
  const [user, setUser] = useState({ name: 'Alice', age: 30 });

  function handleClick() {
    user.age = 31; // Mutation!
    setUser(user); // Same reference
  }

  console.log('Profile rendered, age:', user.age);

  return <button onClick={handleClick}>Birthday</button>;
}

---

Question 7: Key Reset

function App() {
  const [userId, setUserId] = useState(1);

  return (
    <div>
      <button onClick={() => setUserId(id => id === 1 ? 2 : 1)}>
        Switch User
      </button>
      <UserProfile key={userId} userId={userId} />
    </div>
  );
}

function UserProfile({ userId }) {
  const [editing, setEditing] = useState(false);
  console.log('UserProfile mounted for user', userId);

  return (
    <div>
      <p>User {userId}</p>
      <button onClick={() => setEditing(true)}>
        {editing ? 'Editing...' : 'Edit'}
      </button>
    </div>
  );
}

---

Question 8: setState in useEffect

function DataLoader() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  console.log('DataLoader rendered, loading:', loading, 'data:', data);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(json => {
        setData(json);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  return <div>{data.title}</div>;
}

---

Scoring Guide