Why does strict mode render twice in React?

StrictMode renders components twice in development mode(not production) in order to detect any problems with your code and warn you about those problems. This is used to detect accidental side effects in the render phase. If you used create-react-app development tool then it automatically enables StrictMode by default.

     const root = createRoot(document.getElementById("root"));
     root.render(
       <StrictMode>
         <App />
       </StrictMode>
     );
     

If you want to disable this behavior then you can simply remove strict mode.

     const root = createRoot(document.getElementById("root"));
     root.render(<App />);
     

To detect side effects the following functions are invoked twice:

1. Function component bodies, excluding the code inside event handlers.
2. Functions passed to useState, useMemo, or useReducer (any other Hook)
3. Class component's constructor, render, and shouldComponentUpdate methods
4. Class component static getDerivedStateFromProps method
5. State updater functions

> Modern React Note: The official React documentation no longer recommends create-react-app. For modern applications, Vite is the standard SPA build tool, or production frameworks like Next.js, Remix, or Astro.