Everything You Need To Know About React.StrictMode

Strict Mode in React

StrictMode is a tool for highlighting potential problems in an application. Like FragmentStrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.

Note: Strict mode checks are run in development mode only; they do not impact the production build.

HOW TO DO IT

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

In the above example, strict mode checks will not be run against the Header and Footer components. However, ComponentOne and ComponentTwo, as well as all of their descendants, will have the checks.


StrictMode currently helps with:

How I used this knowledge to solve a bug at Uber – BaseUI (Open Source 😉 )

React.StrictMode required for the docs webiste!

So this is all the code I needed to write!

And viola! It’s done!
Merged!

That’s the way to do it!

Written with love,
Rishabh Budhiraja

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s