Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

React is a library for creating front end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

In this article, we’ll look at how to use React’s strict mode to get extra warnings about deprecated APIs and side effects during development.

Strict Mode

Strict mode is a tool for highlighting potential problems in an application. It doesn’t render any visible UI.

It’s only used to activate additional checks and warnings for its descendants.

Strict mode doesn’t affect the production build.

We can add strict mode to a React app as follows:

class App extends React.Component {  
  render() {  
    return (  
      <div>  
        <p>foo</p>  
        <React.StrictMode>  
          <p>bar</p>  
        </React.StrictMode>  
      </div>  
    );  
  }  
}

In the code above, the p tag with ‘foo’ isn’t checked by strict mode since it’s outside of the React.StrictMode component, but the p element inside is checked by strict mode.

Identifying Unsafe Lifecycles

Strict mode checks for unsafe lifecycles. Some lifecycle methods are being deprecated because they encourage unsafe coding practices.

They are:

componentWillMount
componentWillReceiveProps
componentWillUpdate

The UNSAFE_ prefix will be added in an upcoming release.

2 new lifecycle methods are replacing the ones above. They’re the static getDerivedStateFromProps and getSnapshotBeforeUpdate methods.

getSnapshotBeforeUpdate lifecycle is called before mutations are made, and the return value of it will be passed as the 3rd parameter to componentDidUpdate .

getSnapshotBeforeUpdate and componentDidUpdate together covers all the user cases for componentWillUpdate .

Strict mode will warn about the deprecation of old lifecycle hooks.

Warning About Legacy String ref API Usage

Also, React strict mode will warn about using string refs in our code.

String refs are deprecated because they can’t be statically typed. They need to always be consistent. Magic dynamic strings break optimizations in VMs, and it only works on one level.

We can’t pass it around like callback and object refs.

Therefore, it’ll warn us about the usage of string refs since they’re deprecated.

Callback refs and createRef are both supported in the future.

Warning About Deprecated findDOMNode Usage

The findDOMNode method is deprecated. We can use it to search for a DOM node given a class instance.

We shouldn’t need to do this because we can attach a ref to a DOM node.

findDOMNode only returns the first child, but it’s possible for a component to render multiple DOM levels with the use of Fragments.

Therefore, it isn’t very useful now since it only searches one level and we can use ref to get the exact element we’re looking for.

We can attach a ref to the wrapper element instead:

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

If we don’t want to wrapper div to be rendered, we can set display: contents in our CSS if we don’t want the node to be part of the layout.

Detecting Unexpected Side Effects

React works in 2 phases:

The render phase makes any changes to the DOM. React calls render during this phase and then compares the result to the previous render.
The commit phase runs any lifecycle methods to apply any changes required.

Render phase lifecycles include the following class component methods:

constructor
componentWillMount
componentWillReceiveProps
componentWillUpdate
getDerivedStateFromProps
shouldComponentUpdate
render
setState

Since they may be called more than once, they shouldn’t commit any side effects. Ignoring this rule may lead to problems like memory leaks and invalid app state.

Strict mode checks if side effects are made by running the following methods twice:

Class component constructor method
The render method
setState
The static getDerivedStateFromProps lifecycle

Detecting Legacy Context API

Strict mode will detect uses of the old Context API. It’ll be removed in future versions. We should move to the new one if it’s used.

Conclusion

We can use strict mode to detect uses of deprecated lifecycle methods, legacy Context API, string refs, and some code that commits unexpected side effects.

It only shows warnings in development and doesn’t affect production code.

Using React Strict Mode to Avoid Deprecated Code and Side Effects