What do the angle brackets and asterisk mean in React?

Question

What do the angle brackets and asterisk mean in this expression?

class MainScreen extends React.Component<*> {
  render() {

Answer 1

It's a Flow type argument. It specifies that Flow should infer the type of the first type argument, in other words infer the shape of props, see this answer on <*>. This essentially let's you specify an object of any shape for Flow to infer its type. Say you have two props, foo and bar. You could do this:

type Props = {
  foo: number,
  bar: string
};

class MyComponent extends React.Component<Props> { … }

Or, if you don't want proptyping, you can just do:

class MyComponent extends React.Component<*> { … }

And access the props all the same. Flow just infers it's an object with foo and bar.