Using specific APIs inside React.render() should be avoided

• REACT_MISUSED_API_IN_RENDER
• Error
• Medium
• react

This rule applies when specific APIs are used inside React.render().

The below APIs cannot be used inside React.render() because it triggers nested component updates or accesses unmounted components:

1. ReactDOM.render()
2. ReactDOM.unmountComponentAtNode()
3. ReactDOM.findDOMNode()

In the above cases, React outputs a warning message. Therefore, these APIs should be called inside componentDidUpdate() or componentDidMount() instead of React.render().

Note: This rule is based on React 17 API specifications.

Noncompliant Code Example

import React from 'react';
import ReactDOM from 'react-dom';

export class MyComponent extends React.Component {
  render() {
    ReactDOM.findDOMNode(this).focus(); // REACT_MISUSED_API_IN_RENDER alarm because the component is not mounted yet.
    return (
      <input type="text" />
    );
  }
}

Compliant Code Example

import React from 'react';
import ReactDOM from 'react-dom';

export class MyComponent extends React.Component {
  componentDidMount() {
    ReactDOM.findDOMNode(this).focus();
  }
  render() {
    return (
      <input type="text" />
    );
  }
}

Version

This rule was introduced in DeepScan 1.6.0-beta.

See

• ReactDOM APIs

• React Warning: MyComponent is accessing findDOMNode inside its render(). render() should be a pure function of props and state. It should never access something that requires stale data from the previous render, such as refs. Move this logic to componentDidMount and componentDidUpdate instead.