What is the <{}> syntax after extends Component?

Question

I started a new project today using React Native 0.51.0 and noticed that the class syntax for the default project file had something new added, the <{}> s

Answer 1

It is related to Flow typings for the props you will receive in the component. Component<{}> would mean that you don't expect the component to receive props.

With Flow and React.Component, you can define types for props and state (see React$Component type declaration for details).

Example from Flow documentation about React components

import * as React from 'react';

type Props = { /* ... */ };

type State = {
  count: number,
};

class MyComponent extends React.Component<Props, State> {
  state = {
    count: 0,
  };

  componentDidMount() {
    setInterval(() => {
      this.setState(prevState => ({
        count: prevState.count + 1,
      }));
    }, 1000);
  }

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

<MyComponent />;