MENU

Strict Mode

StrictMode activates additional checks and warnings for its descendants, which are viewable on the Console on Developer's Tools Interface (F12).

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

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

Currently, React Strict Mode helps with detecting:

Unsafe legacy lifecycles

Legacy string ref API usage

Legacy context API

Deprecated findDOMNode usage

Detecting unexpected side effects

Although you may have stayed out of these issues in your code, you may have inadvertently used them in one of your imported libraries. That's when Strict Mode comes in handy.