StrictMode

//you can enable strict mode for any part of your application

import React from 'react';

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

Is a tool for highlighting potential problems in an application.

It activates additional checks and warnings for visible UI descendants.

Identifying unsafe lifecycles

When strict mode is enabled, React compiles a list of all class components using the unsafe lifecycles, and logs a warning message with information about these components.

Warning about legacy string ref API usage

//object ref API for managing refs

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

Since object refs were largely added as a replacement for string refs, strict mode now warns about usage of string refs.

Warning about deprecated findDOMNode usage

//you can instead pass a ref to your custom component and pass that along to the DOM using ref forwarding

//you can also add a wrapper DOM node in your component and attach a ref  directly to it

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.wrapper = React.createRef();
  }
  render() {
    return <div ref={this.wrapper}>{this.props.children}</div>;
  }
}

React used to support findDOMNode to search the tree for a DOM node given a class instance.

FindDOMNode only worked if components always return a single DOM node that never changes.

Detecting unexpected side effects

Strict mode can’t automatically detect side effects for you.

To make side effects little more deterministic double invoke the following methods: constructor, render, setState, getDerivedStateFromProps.

Detecting legacy context API

The legacy context API is error-prone, and will be removed in a future major version.

It still works for all 16.x releases but will show warning message in strict mode.

StrictMode — Structure map

Clickable & Draggable!

StrictMode — Related pages: