Strict Mode as a not-to-miss component in React18

Reading time: 5 minutes

Strict mode, <StrictMode> is a react component that lets you find common bugs in your components early during development.

Today our Top-senior referent Pia Rovira brings the second tip-post on React18 and StrictMode component.

When used, it enables additional development behaviors and warnings for the component tree inside it.

Strict Mode does not perform any checks or display any warnings in production mode.

It enables the following behaviors while it does not render any visible elements in the DOM:

Your components will re-render an extra time to find bugs caused by impure rendering.
Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup.
Your components will be checked for usage of deprecated APIs.

It can help catch subtle bugs, especially if they are caused by subtle issues like race conditions or incorrect assumptions about component state.
It can help devs stay up to date with best practices with its warnings and suggestions
It highlights potential problems early, before they become serious problems. This is the case of functions or behaviors that will be deprecated soon or that will, somehow, change. React is rapidly evolving and this kind of warning may save our lives if we pay attention to them when we should.
It avoids common mistakes that are not so obvious
By Identifying unsafe lifecycles and suggesting what to use instead
By detecting legacy stuff like Context API or String ref API usage

When and where should we use Strict Mode?

StrictMode is really useful and I’d recommend wrapping all your React App in it, as it does nothing but help. Cases in which it could be crucial are:

When working in a codebase you didn’t write or you don’t completely know, as it can unveil lots of things.
When you need to figure out what’s wrong and you don’t want to read and test the whole code.
If you are new with React, it will help you get into the habit of producing code that follows React’s best practices.

So… how can I enable this in my project?

Easy peasy! Just wrap the portion of your App you want to check with this component.

// Wrapping the entire app

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

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


// Wrapping only a portion

import { StrictMode } from 'react';

function App() {
  return (
    <>
      <Header />
      <StrictMode>
        <main>
          <Sidebar />
          <Content />
        </main>
      </StrictMode>
      <Footer />
    </>
  );
}

Rounding up!

Keep on exploring our blog post about React and React Native Improved Architecture. Some more tips are coming up…

Check out our other posts for more insights!