React render twice bug

React render twice bug React bug React.StrictMode StrictMode

React render twice bug

React bug

constructor render twice bug

update render twice bug

StrictMode

​​https://reactjs.org/docs/strict-mode.html​​

StrictMode 是用于突出显示应用程序中潜在问题的工具。

与Fragment一样，StrictMode不会呈现任何可见的UI。

它为后代激活其他检查和警告。

注意： 严格模式检查仅在开发模式下运行；它们不会影响生产。

import React from 'react';

function ExampleApplication() {
return (
<div>
<Header />
<React.StrictMode>
<div>
<ComponentOne />
<ComponentTwo />
</div>
</React.StrictMode>
<Footer />
</div>
  );
}

demos

render twice bug ❌

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

render once OK ✅

ReactDOM.render(
<>
<App />
</>,
document.getElementById('root')
);