Skip to content
Optimal Lab

Frontend · interactive

Why components re-render

React re-renders a component when its state changes, when its parent re-renders, or when a context it reads changes. Most re-renders are cheap, but knowing the rules tells you where memo helps and where it can't.

Component tree

no memo

  • <App />state: count, theme · 0 renders
  • <Header />reads ThemeContext · 0 renders
  • <Counter />props: count · 0 renders
  • <Sidebar />state: query · 0 renders
  • <SearchBox />props: query · 0 renders
  • <ProjectList /> · 0 renders
  • <Footer /> · 0 renders
  • <ThemeLabel />reads ThemeContext · 0 renders

Pick an action to change some state, and watch which components render again.

Change some state

memo

  1. 1

    Calling a state setter schedules a re-render of the component that owns that state.

    Nothing yet.

  2. 2

  3. 3

  4. 4

In production

Tools and technologies

Every React app re-renders by these rules; the tools show you which renders happened and why.

Not tied to one language — use these names when you search docs or design a system.