Using specific APIs insideReact.render() should be avoided

• REACT_MISUSED_API_IN_RENDER
• Error
• Medium
• react

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

The below APIs cannot be used insideReact.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 insidecomponentDidUpdate() orcomponentDidMount() instead ofReact.render().

For your reference, usingsetstate() insideReact.render() also triggers the nested component updates. This case is detected byREACT_BAD_UPDATE_STATE rule.

Noncompliant Code Example

import React from 'react';import ReactDOM from 'react-dom';export class MyComponent extends React.Component {  render() {    ReactDOM.findDOMNode(this.node).focus(); // REACT_MISUSED_API_IN_RENDER alarm because the component is not mounted yet.    return (      <div>        <input type="text" ref={(node) => this.node = node} />      </div>    );  }}

Compliant Code Example

import React from 'react';import ReactDOM from 'react-dom';export class MyComponent extends React.Component {  componentDidMount() {    ReactDOM.findDOMNode(this.node).focus();  }  render() {    return (      <div>        <input type="text" ref={(node) => this.node = node} />      </div>    );  }}

Version

This rule was introduced in DeepScan 1.6.0-beta.

See

• ReactDOM APIs

• React Warning: A component 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.

Was this documentation helpful?