React StrictMode and Why Effects Run Twice

StrictMode is a React component that enables extra checks during development. It helps developers notice potential problems before users encounter them. It does not create a visible HTML element.

Think of it as a safety inspector: the inspector does not become part of your product, but checks whether the process works reliably.

---

File: src/App.tsx

import { useEffect } from "react";

export default function App() {
  useEffect(function () {
    // Print a message after the component mounts.
    console.log("Hello Nikita!");
  }, []);

  return <h1>My React App</h1>;
}

Browser Result

localhost:5173

My React App

Development console

Hello Nikita!

Hello Nikita!

Line by line:

1. import { useEffect } from "react"; makes the Hook available.
2. App is our React component.
3. useEffect(function () { ... }, []); tells React to run the Effect after mounting, and not rerun it just because of ordinary state updates.
4. console.log(...) prints a message to the browser console.
5. return describes what React displays on the page.

You might expect one message. But with StrictMode enabled at the root in development, you will typically see:

Hello Nikita!
Hello Nikita!

This does not, by itself, mean that your code is broken.

---

Look in src/main.tsx:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

// Find the HTML element where React will render the app.
const rootElement = document.getElementById("root")!;

// Create the React root and render App inside StrictMode.
createRoot(rootElement).render(
  <StrictMode>
    <App />
  </StrictMode>
);

The ! after getElementById("root") tells TypeScript that we expect the element to exist. The Vite HTML template normally includes <div id="root"></div>.

The important part is:

<StrictMode>
  <App />
</StrictMode>

This enables development checks for the component tree inside StrictMode.

---

When StrictMode wraps the application root, React performs an extra development-only setup and cleanup cycle for Effects after the initial mount.

For our simple logging Effect, the sequence is:

1. React renders and commits the component.
2. React runs the Effect: Hello Nikita! appears.
3. React performs a test cleanup of the Effect, if a cleanup function exists.
4. React runs the Effect again: Hello Nikita! appears again.

GoIT describes this as mounting, unmounting, and mounting again. That is a useful beginner mental model, but it is not necessarily a literal removal and recreation of the DOM elements. More precisely, React tests the Effect's setup and cleanup behavior.

In development, StrictMode may also call the component's render function twice to detect impure rendering. Rendering and running an Effect are different things.

---

In a production build, React does not perform this additional StrictMode test.

For this Effect:

useEffect(function () {
  console.log("READY");
}, []);

This table assumes the component remains mounted, the code is unchanged, and there are no other Effect triggers such as a development hot reload.

Important: useEffect still works in production. Only the extra development checks are removed. An Effect can run again if the component genuinely unmounts and remounts.

---

File: src/App.tsx

import { useEffect, useState } from "react";

export default function App() {
  // Store the number of button clicks.
  const [clicks, setClicks] = useState(0);

  useEffect(function () {
    // With StrictMode at the root, this normally logs twice initially in development.
    console.log("START");
  }, []);

  function handleClick() {
    // Update the state and request another render.
    setClicks(clicks + 1);
  }

  return (
    <button onClick={handleClick}>
      You clicked {clicks} times
    </button>
  );
}

Browser Result

localhost:5173

You clicked 5 times

Console after five clicks

START

START

At startup, START usually appears twice in development with root StrictMode.

Clicking the button updates clicks and causes React to render again, but the Effect does not run again because it has an empty dependency array [].

---

An empty dependency array does not mean “this code can only ever run once.”

useEffect(function () {
  console.log("READY");
}, []);

It means that ordinary updates of the currently mounted component do not rerun this Effect because it has no changing dependencies.

The Effect can still run again when:

• the component genuinely unmounts and mounts again;
• root StrictMode performs its extra development check;
• development hot reload replaces the component code.

---

Should you remove StrictMode because an Effect runs twice? Usually, no.

If an Effect runs twice, investigate whether it performs setup safely and can clean up after itself. Removing StrictMode only hides the development check; it does not fix underlying problems.

This version removes root StrictMode:

// src/main.tsx
createRoot(document.getElementById("root")!).render(
  <App />
);

It may make a log appear once, but the checks can help reveal real bugs.

---

The recommended development setup keeps the component tree inside StrictMode:

// src/main.tsx
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

The checks do not affect the production build. They help you find components whose rendering is impure or whose Effects are missing cleanup.

---

Sometimes an Effect starts something that must be stopped when the Effect finishes. For example, an interval must be cleared.

File: src/App.tsx

import { useEffect } from "react";

export default function App() {
  useEffect(function () {
    // Start a timer that logs once every second.
    const intervalId = window.setInterval(function () {
      console.log("Tick");
    }, 1000);

    // Stop the timer before the Effect is set up again or the component unmounts.
    return function () {
      window.clearInterval(intervalId);
    };
  }, []);

  return <h1>Timer example</h1>;
}

Browser Result

localhost:5173

Timer example

Console

Tick

Tick

Tick

Here, return function () { ... } is the cleanup function. This example previews a later topic: proper Effect cleanup.

In development, React can test setup, cleanup, and setup again without leaving two intervals running.

---

Mistake: “Two logs always mean a bug.”

Correction: Two initial Effect logs can be expected with root StrictMode in development.

Mistake: “An empty dependency array means the Effect can never run again.”

Correction: [] prevents reruns caused by ordinary updates of that mounted component. A real remount runs the Effect again; development checks can also add an extra cycle.

Mistake: “StrictMode doubles all button clicks.”

Correction: StrictMode does not call event handlers twice merely because it is enabled.

Mistake: “useEffect does not work in production.”

Correction: It works normally in production. The extra StrictMode test is development-only.

---

Question: An Effect has []. With root StrictMode enabled, development shows two START messages. You click a state-changing button five times. How many START messages are there in total?

Answer: Normally two, because the clicks do not rerun this Effect.

Summary

1. StrictMode adds helpful development checks without rendering HTML.
2. With root StrictMode, React performs an extra development-only setup and cleanup test for Effects.
3. For a simple useEffect(..., []), this commonly produces two logs at initial mount in development and one in production.
4. Changing unrelated state causes a re-render, but not a rerun of an Effect with [].
5. Keep StrictMode enabled and write Effects that can safely clean up their work.