I'm very confused about the output of the following component:
import { StrictMode } from "react"
import ReactDOM from "react-dom"
function Test(): React.ReactElement {
console.log('render')
Promise.resolve()
.then(() => console.log('then ' + Math.random()))
return <></>
}
ReactDOM.render(
<StrictMode>
<Test />
</StrictMode>,
document.getElementById("root")
)
It produces the following output at least in Chrome and Firefox:
00:46:30.264 render
00:46:30.267 then 0.5430663800781927
00:46:30.267 then 0.9667426372511254
I would rather expect to see the same count of messages. What am I missing?
Repro: https://codesandbox.io/s/elegant-frost-dmcsl
EDIT: I know that strict mode leads to extra rendering, but as stated, I would then expect the same count of messages.
EDIT 2: Both answers below are great. I would like to cite comment of @user56reinstatemonica8 here:
Relevant: Community feedback on console silencing
<StrictMode>
is actually key to your issue.render
is printed only once?