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.