Difference between Flow and PropTypes in ReactJS

Flow is a Javascript extension to type-check your application while propTypes is the built-in type-checking ability of ReactJS. Their functionality may seem similar with a few differences. 

Flow:

Flow is a static type-checking tool for your application. When bigger-scale applications need faster and more productive codes, Flow comes to the rescue. In other words, Flow gives the power to the developer to decide how the developer wants the code to work in any browser and Flow will make sure it does that way.

Example: In this example, we will use flow.

// @flow
function concat(a: string, b: string, c: string) {
    return a + b + c;
}

console.log(concat("Geeks", "For", "Geeks"));
console.log(concat(1, 2, 3)); 

Output:

GeeksForGeeks
//throws Error Because it is of different type

Explanation: We cannot see the numbers merge because we have defined a, b, c of datatype String.

Advantages of using Flow:

• It is a static analysis tool.
• Makes code faster and easy to scale.
• Flow has better support for React and React native.  
• It ensures easy adoption.

Disadvantages of using Flow:

• It catches bugs in compile time, so theoretically it can miss some errors at run time. Javascript extension as we saw in flow work to type check the whole project, but as the app grows, we may find more bugs. Prop types ensure that the user passes values of the correct datatype. It is always a wise choice to use prototypes if the project size is large.

PropTypes:

Like Flow is an extension, PropType is an inbuilt type checker in react. Anything other than the type of prop being passed cannot be checked by it. So it is basically a run-time type checking mechanism.

Note: Before the release of React 15.5.0, PropTypes were available in the React package, but now we have to add the prop-types library in our project.

Example: In this example, we define the prototype as string and import prototypes to type check the code.

import PropTypes from 'prop-types';

class Concat extends React.Component {
    static defaultProps = {
        name: 'GeeksForGeeks',
    }
    
    render() {
        return (
            <h1>Hi, {this.props.name}</h1>
        );
    }
}

Concat.propTypes = {
    name: PropTypes.string
};

Output:

Advantages of PropTypes:

• PropTypes is one of the best method to catch any error caused at runtime
• They're not as type-safe as an extension-like flow but they're much easier to set up and work with.

Disadvantages of PropTypes:

• It is not as flexible as Flow.