eslint-plugin-react: Should react/no-did-mount-set-state trigger on ES2017 async componentDidMount?

The rule react/no-did-mount-set-state triggers error on async componentDidMount function for a deferred setState. Basically, this.setState() is being called here after an async operation has been completed. It is not re-rendering straight after mounting, but only after some data has been retrieved from a server. Does it make sense to error on this?

async componentDidMount() {
    try {
      await someAsyncOperation();
    } catch (e) {
      this.setState({errorMessage: 'Failed to load data!'});
    }
  }

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 21
Comments: 16 (8 by maintainers)

Commits related to this issue

Supporting async/await in `no-did-mount-setstate` rule (fixes #1110) — committed to idanen/eslint-plugin-react by idanen 6 years ago

Most upvoted comments

I agree it is related, but the fix for #56 at https://github.com/yannickcr/eslint-plugin-react/commit/70fef7194783c1603f2b7d89e698647706aab658 will not cover the async await case. Could similar logic be added to any calls to setState after an await within the componentDidMount body?

bartolkaruza on Mar 12, 2017

What about an option to never trigger when componentDidMount is async ? It’s clearly not perfect, lets the user shoot himself in the foot but less so than turning off the rule altogether

tgroutars on Jun 7, 2018

I would also like such an option. When componentDidMount is async it’s rarely the case that the user would try to do a setState before having waited for some promise. The other alternative for me is to simply disable this rule, as it’s annoying for the devs using async/await

slorber on Aug 16, 2018