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?

CodePudding user response：

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.