React PropTypes vs. Flow

Question

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 respon

Answer 1

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).

Answer 2

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.

Answer 3

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

Answer 4

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.