prop-types rule does not catch errors when render() returns a function call

[evansolomon]

Just came across this and I'm not sure I 100% understand this cause. Here's an example component that exhibits the behavior (note: I'm using React Native here since that's where I noticed it, happy to reconstruct a normal React example if needed).

import React from 'react-native'
const {View} = React
class PropComponent extends React.Component {
  _render() {
    return <View>{this.props.thisDoesNotExist}</View>
  }

  render() {
    return this._render()
  }
}
export default PropComponent

With the prop-types rule turned on, this code is not considered an error. Here are similar examples of components that are correctly considered errors (some boilerplate omitted for brevity).

// Returning jsx directly
class PropComponent extends React.Component {
  render() {
    return <View>{this.props.thisDoesNotExist}</View>
  }
}

// Returning a function call wrapped in jsx
class PropComponent extends React.Component {
  _render() {
    return <View>{this.props.thisDoesNotExist}</View>
  }

  render() {
    return <View>{this._render()}</View>
  }
}

This seems wrong, but I'm wondering if it's know/intended.

[yannickcr]

Yes, it is know. It is due to the difficulties to know what is and what is not a React component simply by analyzing the AST. So for now "A React component is defined has an object/class with a property "render" that return a JSXElement or null/false".

I need to improve this to, at least, always consider a class that extends React.Component or an object wrapped in React.createClass as React components.

For a possible future evolution, I am also playing with tern.js to know for sure if we are in a React component or not (draft)

[evansolomon]

Got it. Thanks.