What is the meaning of `Component<Props>` of react-native

Question

I created a new react-native project recently, and I found the component syntax becoming export default class WelcomeScreen extends Component<Props> that's different from export default class WelcomeScreen extends Component before.

I thought it's replace the syntax of code of below

  constructor(props) {
    super(props)
  }

but after testing, I found I still have to ref props with the code above, so what's the exactly function of this syntax <Props> ?

Answer 1

Component<Props> is syntax of Flow to check type of data on Props. Flow infers types and tracks data as it moves through your code.

Example:

    // @flow
    import * as React from 'react';
    import { Text } from 'react-native';

    type Props = {
      bar: string, // this mean type data of bar is string and is required.
    };

    class MyComponent extends React.Component<Props> {
      render() {    
        return <Text>{this.props.bar}</Text>;
      }
    }

Reference:

https://flow.org/en/

https://flow.org/en/docs/react/