ReactJS properties validation

Question

I'm moving from ReactJs to React-Native and found this function structure in facebook's code for a react-native button:

class Button extends React.Component<{
  title: string,
  onPress: () => any,
  color?: ?string,
  hasTVPreferredFocus?: ?boolean,
  accessibilityLabel?: ?string,
  disabled?: ?boolean,
  testID?: ?string,
}> {
  static propTypes = {
    /**
     * Text to display inside the button
     */
    title: PropTypes.string.isRequired,
    /**
     * Text to display for blindness accessibility features
     */
    accessibilityLabel: PropTypes.string,
    /**
     * Color of the text (iOS), or background color of the button (Android)
     */
    color: ColorPropType,
    /**
     * If true, disable all interactions for this component.
     */
    disabled: PropTypes.bool,
    /**
     * TV preferred focus (see documentation for the View component).
     */
    hasTVPreferredFocus: PropTypes.bool,
    /**
     * Handler to be called when the user taps the button
     */
    onPress: PropTypes.func.isRequired,
    /**
     * Used to locate this view in end-to-end tests.
     */
    testID: PropTypes.string,
  };

  ...
}

In ReactJS I used just to build my components with propTypes checking, so:

a) What is the purpose of having the props specification inside the brackets at the class definition (<{...}> ? Is this available also in normal ReactJS?

b) Will that check the passed properties format? If so, why do I need propTypes here?

score 4 · Answer 1 · answered Jun 02 '18 at 15:30

For clarity's sake, the proper term for the definition inside the brackets is called a generic, which is like a type argument when the function/class/whatever is unsure what the type of something is, so it lets you fill in the blanks - in this case, the type for the component's props.

Particularly, this syntax looks like Flow, but TypeScript is also a popular option for type checking.

So:

The generic is used to type check using your component at compile time. This is syntax specific to type checkers, and isn't available in normal JS.
propTypes is used to check the types during runtime, to improve DX for people who aren't using a type system.

Generally, projects with type systems only opt to use the generic to reduce verbosity, If you're using a type system, propTypes is only really needed if you're releasing the component to the public.

Priyesh Kumar · Answer 2 · 2018-06-02T16:14:05.410

Facebook uses Flow (you can see comments on top of the source code) for static analysis. You can use Typescript or any other analyzer. Main goal of defining props types is to prevent programming mistakes. Read more here

React component takes 2 generic parameters React.Component<PropType, context> {}.

Prop types
Context

Also React.Component has some static properties like

propTypes which defines what are the props this component can take.
defaultProps defines default values of the props if they are not passed from the parent.

Coming to your question:

What is the purpose of having the props specification inside the brackets at the class definition <{...}>?

To define what are the props the component can take, for static analysis and error reporting for required props if they are not passed.

Is this available also in normal ReactJS?

Yes (You'll have to add Flow or TypeScript to your project)

Will that check the passed properties format. If so, why do I need propTypes here??

Yes, some times where the type of the props can't be inferred at compile time, then it would be useful to see any warnings generated from using propTypes. Credit

ReactJS properties validation

2 Answers2