Should propTypes and defaultProps be used in conjunction with Flowtype or Full Flowtype?

Question

Thinking of a simple example, for example:

class CommentAreaComponent extends React.Component { static propTypes = { id: PropTypes.string.isRequired, loading: PropTypes.bool, }; static defaultProps = { loading: false, }; 

In the constructor, I can define something like this to achieve (I think) the same:

 class MyComponent extends React.Component { constructor({ loading = false, }:{ id:string, loading?:boolean }) { super(arguments[0]); } } 

The second example uses only Flowtype. Benefit of using Reacts PropTypes and DefaultProps? Or can I completely abandon them when using FlowType?

Answer 1

You can use Flow types instead of React PropTypes, but your suggested syntax is not the usual way to do this. See Flow docs (scroll down for ES6 syntax):

 class Button extends React.Component { props: { title: string, visited: boolean, onClick: () => void, }; state: { display: 'static' | 'hover' | 'active'; }; static defaultProps = { visited: false, }; constructor(props) { super(props); this.state = { display: 'static', }; } render() { let className = 'button ' + this.state.display; if (this.props.visited) { //... } return (/*...*/); } } 

The only thing you cannot do with the types of streams you can use with PropTypes is defining custom validators (for example, to check if it is a valid email address).

I have more Examples of thread reactions on github , but I have not tested them with thread v0.22, but only v0.21. They may need minor adjustments.

Answer 2

Typically, static flow analysis will give you more power and more coverage, and therefore propTypes preferred.

However, propTypes are still good in cases where you can be object-propagating props down through multiple components or in other dynamic execution scripts where props may not have the expected values.

Think about getting the best out of https://github.com/brigand/babel-plugin-flow-react-proptypes

NOTE. I am not associated with this library.