Site icon Effectus Software Blog

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

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

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:

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:

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!

Exit mobile version