What Triggers a Re-render

The Most Common React Misconception

Ask a React developer "what causes a re-render?" and most will say "when props change." This is wrong, and this misunderstanding is the root cause of most React performance problems.

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

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <Child name="Alice" />  {/* "Alice" never changes */}
    </div>
  );
}

function Child({ name }) {
  console.log('Child renders');  // This logs on EVERY button click
  return <p>Hello, {name}</p>;
}

Click the button. Child re-renders even though name is always "Alice". Props didn't change, but Child rendered anyway. Why? Because parent re-rendered.

The Mental Model

Trigger 1: setState (or useReducer dispatch)

This is the only way a component triggers its own re-render:

function Counter() {
  const [count, setCount] = useState(0);

  // Calling setCount triggers a re-render of Counter
  // AND all of its children
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      <ExpensiveChild />  {/* Also re-renders — it's a child */}
    </div>
  );
}

Trigger 2: Parent Re-renders

When a parent component re-renders, all its children re-render. Not just children whose props changed — ALL children:

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

  return (
    <div>
      <ThemeToggle onToggle={() => setTheme(t => t === 'light' ? 'dark' : 'light')} />
      {/* ALL of these re-render when theme changes, even the ones
          that don't use theme at all */}
      <Header />
      <Sidebar />
      <MainContent />
      <Footer />
    </div>
  );
}

When setTheme fires, App re-renders. React then re-renders Header, Sidebar, MainContent, and Footer — regardless of whether they use theme or not.

This is React's default behavior, not a bug. React can't know whether a child's output would change without actually calling the component function. Calling the function IS the render. React optimizes by comparing the output, not by predicting it.

Trigger 3: Context Change

When a context value changes, every consumer of that context re-renders — even if the specific value they use didn't change:

const AppContext = createContext({ theme: 'light', locale: 'en' });

function App() {
  const [state, setState] = useState({ theme: 'light', locale: 'en' });

  return (
    <AppContext.Provider value={state}>
      <ThemeDisplay />   {/* Re-renders when locale changes too */}
      <LocaleDisplay />  {/* Re-renders when theme changes too */}
    </AppContext.Provider>
  );
}

function ThemeDisplay() {
  const { theme } = useContext(AppContext);
  // Re-renders whenever ANY part of AppContext changes
  // Not just when 'theme' changes
  return <div>Theme: {theme}</div>;
}

Even though ThemeDisplay only reads theme, it re-renders when locale changes because the entire context object reference changed.

What Does NOT Trigger a Re-render

Understanding what doesn't cause re-renders is equally important:

// Mutating state directly — NO RE-RENDER
const [user, setUser] = useState({ name: 'Alice' });
user.name = 'Bob';  // Mutated, but no re-render. React doesn't know.

// Changing a ref — NO RE-RENDER
const countRef = useRef(0);
countRef.current = 42;  // Updated, but no re-render

// Changing a variable — NO RE-RENDER
let localVar = 'hello';
localVar = 'world';  // Not state, not tracked by React

// Props changing without parent re-rendering — IMPOSSIBLE
// Props can only change when the parent provides new values,
// which only happens when the parent re-renders.
// "Props changed" is always preceded by "parent re-rendered."

The Re-render Cascade Visualized

function App() {                    // Renders: always (root)
  const [count, setCount] = useState(0);
  return (
    <Layout>                        {/* Renders: when App renders */}
      <Header>                      {/* Renders: when Layout renders */}
        <Logo />                    {/* Renders: when Header renders */}
        <Nav />                     {/* Renders: when Header renders */}
      </Header>
      <Main>                        {/* Renders: when Layout renders */}
        <Counter                    {/* Renders: when Main renders */}
          count={count}
          onIncrement={() => setCount(c => c + 1)}
        />
        <Sidebar />                 {/* Renders: when Main renders (!) */}
      </Main>
    </Layout>
  );
}

Clicking increment:

• setCount → App renders
• App renders → Layout renders → Header, Main render
• Header renders → Logo, Nav render
• Main renders → Counter, Sidebar renders

Sidebar has nothing to do with count. It receives no props related to count. But it re-renders because its parent (Main) re-rendered, because Main's parent (Layout) re-rendered, because Layout's parent (App) called setState.

This cascade is the #1 source of unnecessary renders in React applications.

Production Scenario: The 200-Component Cascade

A dashboard renders 200 chart widgets. The header has a notification bell with an unread count:

function Dashboard() {
  const [unreadCount, setUnreadCount] = useState(0);

  useEffect(() => {
    const ws = new WebSocket('/notifications');
    ws.onmessage = () => setUnreadCount(c => c + 1);
    return () => ws.close();
  }, []);

  return (
    <>
      <Header unreadCount={unreadCount} />
      {/* All 200 charts re-render on every notification */}
      <ChartGrid charts={charts} />
    </>
  );
}

Every incoming notification increments unreadCount, which re-renders Dashboard, which re-renders all 200 charts. The fix is state colocation — move the notification state closer to where it's used:

function Dashboard() {
  return (
    <>
      <Header />  {/* Manages its own notification state */}
      <ChartGrid charts={charts} />
    </>
  );
}

function Header() {
  const [unreadCount, setUnreadCount] = useState(0);

  useEffect(() => {
    const ws = new WebSocket('/notifications');
    ws.onmessage = () => setUnreadCount(c => c + 1);
    return () => ws.close();
  }, []);

  return <header><NotificationBell count={unreadCount} /></header>;
}

Now setUnreadCount only re-renders Header and its children. ChartGrid is unaffected.

Common Mistakes

Challenge

Challenge: Find the unnecessary re-renders

function App() {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedId, setSelectedId] = useState(null);

  return (
    <div>
      <SearchBar
        value=`{searchQuery}`
        onChange=`{setSearchQuery}`
      />
      <UserList
        selectedId=`{selectedId}`
        onSelect=`{setSelectedId}`
      />
      <UserDetail userId={selectedId} />
      <Footer />
    </div>
  );
}

// When the user types in SearchBar:
// 1. Which components re-render?
// 2. Which re-renders are unnecessary?
// 3. How would you fix it without React.memo?

function App() {
  const [selectedId, setSelectedId] = useState(null);

  return (
    <div>
      <SearchSection />  {/* Manages its own query state */}
      <UserList selectedId={selectedId} onSelect={setSelectedId} />
      <UserDetail userId={selectedId} />
      <Footer />
    </div>
  );
}

function SearchSection() {
  const [searchQuery, setSearchQuery] = useState('');
  return <SearchBar value={searchQuery} onChange={setSearchQuery} />;
}

Quiz

Key Rules