react: Warn If a Component Doesn't Extend React.Component

To support arrow functions and plain functions as “components” we need to know if we can call new on them. Examples that won’t work:

function PlainFunctionComponent(props) {
  return null;
}

var ArrowFunctionComponent = (props) => <div />;

class ClassComponent {
  render() {
    return <div><PlainFunctionComponent /><ArrowFunctionComponent /></div>;
  }
}

We need to detect if a component is a “function” or a “class” before calling new on it.

We can call new on everything if they’re plain functions as long as they return a ReactElement. However, that won’t work for null/false/string return values and we want to support those too. We also can’t call new on arrow functions. Likewise, we can’t NOT call new on classes.

Unfortunately ECMAScript doesn’t have a way to detect if something is newable or not.

The current plan is to add our own static flag to React.Component so that we can detect if something is a class.

Any class pattern that doesn’t require new should still be possible:

function ModuleComponent(props) {
  return {
    render() {
      return <div />;
    }
  };
}

I’m not sure how we can distinguish this pattern from one that requires new for warnings though. 😦