0Pricing
React Academy · Lesson

What StrictMode Does

Understand double-invocation and deprecated API warnings in development.

What StrictMode Does is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will learn what React.StrictMode does in development, which warnings it surfaces, and how it helps you write safer React code.

What Is StrictMode?

StrictMode is a special React component that wraps part of your tree and enables extra checks **in development only**. It has zero effect on the production build.
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

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

Double-Invocation of Lifecycle

In Strict Mode, React intentionally calls your component function and some lifecycle methods **twice** in development. This is designed to surface side effects that are not properly cleaned up.

Why Double-Invoke?

React 18+ can remount components in the future (e.g. for fast-refresh and Offscreen API). Double-invoking in development simulates this so you catch bugs like subscriptions that accumulate or DOM mutations that run twice.

Effect Mount–Unmount–Remount

With StrictMode in React 18, every useEffect fires, cleans up, and fires again on initial mount. If your cleanup function is correct, the double-fire is harmless. If your app breaks, the cleanup is missing or wrong.
useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id); // cleanup required!
}, []);

Detecting Deprecated APIs

StrictMode warns when your code uses deprecated React APIs such as `componentWillMount`, `componentWillReceiveProps`, and string refs. These warnings appear in the browser console as yellow warnings.

Legacy Context API Warning

If any third-party library uses the legacy context API (`childContextTypes` / `getChildContext`), StrictMode will warn. This signals that the library needs to be updated to the modern `React.createContext` API.

Safe to Enable in Existing Apps

You can wrap just part of your component tree in StrictMode to gradually enable it in an existing app. Start with new sections and expand as you fix warnings.
function App() {
  return (
    <>
      <LegacyPart />  {/* not wrapped */}
      <StrictMode>
        <NewFeature />
      </StrictMode>
    </>
  );
}

No Visual Difference

StrictMode does not render any visible UI. It is purely a development tool. You will not see any extra elements in the DOM — only additional console warnings and the double-invocation behaviour.

Enable It From Day One

The best practice is to enable StrictMode from the very beginning of a project. Fixing double-invocation issues early is far cheaper than discovering them later when the codebase is large.

Quick Check

What is the purpose of React StrictMode's double-invocation of component functions?

Recap

StrictMode is a zero-cost development tool that double-invokes renders and effects to catch impure code, warns about deprecated APIs, and prepares your app for future React features.

Up Next

Next lesson: **Pure Components & Avoiding Side Effects in Render** — you will learn to write render functions that are free of mutations and external reads.

Frequently asked questions

Is the “What StrictMode Does” lesson free?

Yes — the full text of “What StrictMode Does” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “What StrictMode Does”?

Understand double-invocation and deprecated API warnings in development. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “What StrictMode Does” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. What StrictMode Does
  2. Pure Components & Avoiding Side Effects in Render
  3. Key & Ref Best Practices
  4. Folder Structure & Naming Conventions
← Back to React Academy