componentDidMount() is invoked immediately after a component is mounted. This method is a good place to load data from an endpoint as it is invoked before the browser updates the screen. Using setState() in componentDidMount() will trigger an extra rendering, so it causes performance issues as render() will be called twice.

Bad Practice

var Hello = createReactClass({
  componentDidMount: function() {
    this.setState({
      name: this.props.name.toUpperCase()
    });
  },
  render: function() {
    return <div>Hello {this.state.name}</div>;
  }
});

Recommended

var Hello = createReactClass({
  componentDidMount: function() {
    this.onMount(function callback(newName) {
      this.setState({
        name: newName
      });
    });
  },
  render: function() {
    return <div>Hello {this.state.name}</div>;
  }
});

var Hello = createReactClass({
  componentDidMount: function() {
    this.props.onMount();
  },
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

References

React componentDidMount

deepsourcestatus / test-repository

No ignore rules found