CODEWITHSUNDEEP
reactjsflowtypereact-proptypes
danielbuechele
danielbuechele

Reputation: 3102

React PropTypes vs. Flow

PropTypes and Flow cover similar things but are using different approaches. PropTypes can give you warnings during runtime, which can be helpful to quickly find malformed responses coming from a server, etc. However, Flow seems to be the future and with concepts like generics is a very flexible solution. Also the autocompletion offered by Nuclide is a big plus for Flow.

My question now is which is the best way to go, when starting a new project. Or could it be a good solution to use both, Flow and PropTypes? The problem with using both is that you write a lot of duplicate code. This is an example of a music player app I wrote:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Both definitions basically contain the same information and when the data type is changed, both definitions need to be updated.

I found this babel plugin to convert type declarations to PropTypes, which might be a solution.

Upvotes: 106

Views: 24846

Answers (4)

danielbuechele
danielbuechele

Reputation: 3102

One year after asking this question, I wanted to give an update about how my experiences with this problem.

As Flow evolved a lot, I started typing my codebase with it and did not add any new PropType definitions. So far, I think this is good way to go, because as mentioned above, it allows you to not only type props but other parts of your code, too. This comes in really handy for example when you have a copy of you props in the state, that can be modified by the user. Also, auto-completion in IDEs is an awesome gain.

Automatic converters in one or the other direction didn't really take off. So, for new projects, I would now really recommend using Flow over PropTypes (in case you don't want to do the typing twice).

Upvotes: 85

ancyrweb
ancyrweb

Reputation: 1313

I believe the missed point here is that Flow is a static checker while PropTypes is a runtime checker, which means

  • Flow can intercept errors upstream while coding : it can theoretically miss some errors that you wont know about (if you didn't implemented flow enough in your project for example, or in case of deep nested objects)
  • PropTypes will catch them downstream while testing, so it wont ever miss

Upvotes: 29

Mark Volkmann
Mark Volkmann

Reputation: 979

Try declaring the type of props using only Flow. Specify an incorrect type, such as number instead of string. You'll see that this will be flagged in code that uses the component within your Flow-aware editor. However, this will not cause any tests to fail and your app will still work.

Now add use of React PropTypes with an incorrect type. This WILL cause tests to fail and be flagged in the browser console when the app is run.

Based on this, it seems that even if Flow is being used, PropTypes should also be specified.

Upvotes: 16

Dan Prince
Dan Prince

Reputation: 29989

Other than both belonging to the very wide field of type checking, there's not really much similarity between the two.

Flow is a static analysis tool which uses a superset of the language, allowing you to add type annotations to all of your code and catch an entire class of bugs at compile time.

PropTypes is a basic type checker which has been patched onto React. It can't check anything other than the types of the props being passed to a given component.

If you want more flexible typechecking for your entire project then Flow/TypeScript are appropriate choices. So long as you are only passing annotated types into components, you won't need PropTypes.

If you just want to check prop types, then don't over-complicate the rest of your codebase and go with the simpler option.

Upvotes: 38

Related Questions