You click a button, and a quick log shows the component rendered twice. It feels like a bug, and sometimes it points to one — but often it’s React doing exactly what it’s told. Knowing which is which saves hours of chasing ghosts.
Rule out Strict Mode first
In development with Strict Mode on, React intentionally renders components twice to surface side effects that aren’t safe. This only happens in development and disappears in production. Before debugging, confirm whether you’re seeing a real double render or Strict Mode’s deliberate one.
Then look at state and props
Updating state in a way that triggers a second render is common — setting two separate state values in one handler, where one depends on the other, can cause an extra pass. Batch related state into a single update or a reducer so one event produces one render.
State that lives too high is another cause. When state sits in a parent, every change re-renders the whole subtree, even components that don’t use it. Move state down to where it’s actually needed, or split context so unrelated consumers don’t re-render together.
Unstable props are the third: passing a new object or function created inline on every render makes children re-render even when nothing changed. Memoize values and callbacks passed down. Rule out Strict Mode, then the fix is usually fewer, better-scoped state updates — not memoization sprinkled everywhere.