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 react-in-jsx-scope does not understand fragments #1758
• Add support for React 16.3 lifecycle methods to no-unused-prop-types Update no-unused-prop-types rule for new React class component lifecycles #1681
• Add support for React 16.3 lifecycle methods to sort-comp Update sort-comp for React 16.3+ #1767
• Add support for React 16.3 lifecycle methods to no-typos 3aac310
• Add warnings for componentWillMount, componentWillReceiveProps and componentWillUpdate lifecycle methods in no-deprecated Adjusted no-deprecated rule for React 16.3.0 #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:

• SFC detection: React 16 #1510
• react/no-unused-state warning in new getDerivedStateFromProps methods #1759
• no-unused-prop-types rule does not recognise component that returns an array #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 d51b0cc (for #1758 mentioned above)

I observed this in eslint-plugin-react@7.8.2 pulled in from react-scripts@2.0.0-next.

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.

[ljharb]

I'm pretty sure we have full support for React 16, and 17, so I'll close this. If anything's missing, please file a new issue.