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

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 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

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.

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 about React18 StrictMode!

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!