Eslint-plugin-react: Add support for React 16

[jseminck]

I think it would be great if this plugin would be ready with supporting all the new things that React 16 has to offer.

Currently I'm not sure exactly what would need to to be added though. The only thing I could think of was the componentDidCatch "lifecycle method" that got added. This should be added to a number of rules (prop-types, no-unused-prop-types, no-typos) and should only be checked when using React 16.

[ljharb]

Adding these things only when the pragma is set to 16+ seems great; provided that the default is not changed prior to React 16 getting actually released.

If we're going to do this, let's take the opportunity to put the list of lifecycle methods in a single place :-)

[jseminck]

Another thing we should test: since it's now possible to return an array from render(), but the array does require keys at the moment. So we should check whether the current rule react/no-array-index-key: Prevent using Array index in key props works for this case...

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Edit: it works already. The rule was already smart enough to detect arrays!

[Dajust]

Hi, I just wanna find out how soon we might have this features!

Thanks for the great work!

[amannn]

Another one I just stumbled across: react/sort-comp should recognize componentDidCatch as a lifecycle method in the order property.

[hozefaj]

Getting error Expected 'this' to be used by class method 'componentDidCatch'. I guess until this is fixed, need to disable the check for this method.

[yannickcr]

The following changes were merged to support React 16:

• Add support for fragments to react-in-jsx-scope #1758
• Add support for React 16.3 lifecycle methods to no-unused-prop-types #1681
• Add support for React 16.3 lifecycle methods to sort-comp #1767
• Add support for React 16.3 lifecycle methods to no-typos 3aac310219d378ff5ae3aaa08904a91ba82f836c
• Add warnings for componentWillMount, componentWillReceiveProps and componentWillUpdate lifecycle methods in no-deprecated #1750

Is there still something missing for React 16 support ?

[ljharb]

https://github.com/yannickcr/eslint-plugin-react/labels/react%2016 has a list; particularly:

• #1510
• #1759
• #1682

[yannickcr]

Yes I saw that list, but from my point of view #1510 and #1682 are more about improvements of the component detection, which is tricky.

However I missed #1759 (confused it with the same problem in no-unused-prop-types, solved in #1681).

[TBBle]

Unless I'm misunderstanding something, https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/jsx-uses-react.js doesn't match for Fragments, and so a file with only a JSX Fragment and no other elements will raise

warning  'React' is defined but never used  no-unused-vars

Removing React does correctly raise

error  'React' must be in scope when using JSX  react/react-in-jsx-scope

due to d51b0cc467a27921100bd28187e9441a45cdd401 (for #1758 mentioned above)

I observed this in [email protected] pulled in from [email protected].

I guess that the fix is simply to handle JSXOpeningFragment the way it handles JSXOpeningElement?

[alexzherdev]

@ljharb I missed this in #1956, I’ll do another pass over the rules to double-check.