Why does setState cause 2 rerenders here?

Question

export const Component = () => {
    const [count, setCount] = useState<number>(0);

    const renderCount = useRef<number>(0);
    renderCount.current =  renderCount.current + 1;

    return (<>
        <div>{`Rendered ${renderCount.current} times`}</div>
        <button type="button" onClick={() => setCount(count + 1)}>{`Clicked ${renderCount.current} times`}</button>
    </>);
}

I'd expect for clicking the button to cause one rerender, because the value of count updates, and the UI has to rebuild itself. But it seems to cause two rerenders with every change. How/why is this happening?

Are you wrapping your app with `StrictMode`? – DecPK Jul 13 '22 at 21:05 — DecPK, Jul 13 '22 at 21:05
Yes, I am. Just tested, that's the answer – user6118986 Jul 13 '22 at 21:11 — user6118986, Jul 13 '22 at 21:11

score 1 · Accepted Answer · answered Jul 13 '22 at 21:13

If you're wrapping your app with <StrictMode>, it will always render twice.

According to docs, this is an intentional feature for the development mode of React, since <StrictMode> aims to help you optimize your code and tries to find any issues that your hooks might cause.

Why does setState cause 2 rerenders here?

1 Answers1