React:StrictMode

lastmod 2022-09-22created 2022-09-222 edits

StrictMode is a tool for highlighting potential problems in an application. Like Fragment, it does not render any visible UI; it enables additional checks and warnings for its descendants.

Usage

You can enable strict mode for any part of your application as below.

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 helps with the following:

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

See also

• react