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.

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.

//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.

//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.

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.

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.