React StrictMode

StrictMode helps you find common React bugs during development.

Wrap the root component to enable it for the whole application:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
)

Strict Mode enables additional development-only behavior:

• it renders components an extra time to reveal impure rendering
• it runs Effects an extra setup and cleanup cycle
• it runs callback refs an extra setup and cleanup cycle
• it checks for deprecated React APIs

This can make a component appear to render twice while you are developing. React is checking whether your rendering logic and cleanup code are safe to run again.

Do not remove Strict Mode to hide those problems. Fix the component that causes them.

You can also enable it for one part of the application:

function App() {
  return (
    <>
      <Header />
      <StrictMode>
        <Checkout />
      </StrictMode>
    </>
  )
}

Strict Mode does not add the extra checks to the production build.