React 组件渲染两次，不使用状态钩子的函数组件只渲染一次

Question

Demo code's codesandbox url: https://codesandbox.io/s/hungry-goldstine-gmvz4

Class component is rendered twice, without Props and State; Function components that do not use useState hook are rendered only once and using useState hook will render twice.

Is it rendered twice for get State and Props values?

A class component is a stateful component whether or not the state is initialized?

Can anyone help me understand this question? Thank you!!!

additional a image:

Answer 1

As comment @Sagar More, StricktMode cause it.

Output without StrickMode

See docs

Strict mode can't automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following methods:

Class component constructor method

The render method

setState updater functions (the first argument)

The static getDerivedStateFromProps lifecycle

The shouldComponentUpdate method