Everything You Need To Know About React.StrictMode

Strict Mode in React

StrictMode is a tool for highlighting potential problems in an application. Like Fragment, StrictMode 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:

• Identifying components with unsafe lifecycles
• Warning about legacy string ref API usage
• Warning about deprecated findDOMNode usage
• Detecting unexpected side effects
• Detecting legacy context API

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

So this is all the code I needed to write!

That’s the way to do it!

Written with love,
Rishabh Budhiraja