Using React Strict Mode to Avoid Deprecated Code and Side Effects
Tags: react, webdev, programming, javascript
Published: 2021-01-20 23:10:58

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