React: What is Strict Mode?

Strict Mode is a development tool that helps find potential problems in components.

Simple analogy: Imagine you are taking an exam. A strict teacher (Strict Mode) asks tricky questions and checks every detail. This helps find errors BEFORE you get to work (production). In real life (production) the teacher is kind and does not nitpick.

What Strict Mode does:

1. Double invocation — in Strict Mode React intentionally calls your functions twice (render, hook initialization). This helps detect "side effects" (for example, you create a subscription in useEffect without cleanup).
2. Warnings — Strict Mode shows console warnings about outdated APIs (for example, componentWillMount).
3. Security check — detects use of string refs (outdated), findDOMNode, and other dangerous practices.

How to use:

1import { StrictMode } from "react";
2
3function App() {
4    return (
5        <StrictMode>
6            <MyApp />  {/* Everything inside is checked */}
7        </StrictMode>
8    );
9}

What happens with double invocation:

1function App() {
2  console.log("App rendered"); // This will log TWICE in dev mode
3  
4  useEffect(() => {
5    console.log("Effect ran"); // This will also run TWICE in dev mode
6    return () => console.log("Cleanup");
7  }, []);
8  
9  return <h1>Hello</h1>;
10}
11// Output in dev:
12// "App rendered"
13// "App rendered"
14// "Effect ran"
15// "Cleanup"
16// "Effect ran"

Why double invocation exists: React wants to ensure your components are resilient to being mounted and unmounted. If your effect doesn't properly clean up, the double invocation in dev will expose the bug.

Important:

• Strict Mode works ONLY in development mode.
• In production mode it does nothing and does not affect bundle size.
• Double invocation of functions is normal in dev. This is not an error, but a way to find problems.
• To enable it only for parts of the app, wrap specific routes or components rather than the entire app.