Eslint-plugin-react: `react/sort-comp` breaks property reference

[JounQin]

import _ from 'lodash'
import React from 'react'

class Test extends React.PureComponent {
  fetch = async () => {}

  lazyFetch = _.debounce(this.fetch, 1000)
}

It will report an error now, but if we change the order, fetch will be undefined on lazyFetch initialize.

[ljharb]

This is invalid anyways - it's this.fetch. fetch is a global variable here.

[ljharb]

(iow, class fields become own properties on this - they're not lexical variables)

[JounQin]

@ljharb I just forgot to add this. in my example, although it doesn't change anything.

[ljharb]

This is true. However, I'd say that if you have a class field that depends on other ones, it belongs in the constructor, and not as a class field.

Does sort-comp autofix here? If so, it's a bug. If not, it's a case for an override comment.

[JounQin]

Sorry I don't understand what does Does sort-comp autofix here? mean here, it throws an error, of course it can't be autofixed.

[ljharb]

That’s not what i mean - i mean that is the rule autofixing your code such that it starts throwing an error? Or is only your manual fix what introduces the error?

[JounQin]

I can only manually change the sorts to prevent eslint error from react/sort-comp, and then it throws an error from lodash.debounce about undefined function at runtime.

[ljharb]

Gotcha. I think this is a case for an eslint override comment, or better, the lazyFetch class field belongs instead in the constructor.

[JounQin]

Do you mean it is a wont't fix for eslint-plugin-react?

[ljharb]

Yes, I mean that I don't think it's a problem that needs fixing. Class fields shouldn't depend on each other like that.