reactjs - PropTypes in React

Question

In some examples, I have seen something like this:

Footer.propTypes = {
  completedCount: PropTypes.number.isRequired,
  activeCount: PropTypes.number.isRequired,
  filter: PropTypes.string.isRequired,
  onClearCompleted: PropTypes.func.isRequired,
  onShow: PropTypes.func.isRequired
}

What are these PropTypes really doing? Are they nice-to-have or must-have?

Answer 1

As pointed out by finalFreq I stand corrected! "the example provided will work perfectly fine in future versions of react. React deprecated calling the proptypes function directly but annotating a component will work just fine in current and future versions."

I suggest flowtypes if you are just learning types in JS, works at build time instead of run-time. This works in the editor! The editor extensions also use strong inference to alert you when a less obvious type is missing, null, or of a different type. The main benefit is that it speeds up development and reduces bugs without slowing run-time. You can easily strip the flow from your js before production.

FlowType: https://flowtype.org/docs/getting-started.html#_

I suggest TypeScript if you are wanting the more powerful and featureful set, to learn types in JS.

TypeScript: https://github.com/Microsoft/TypeScript

To answer your question proptypes were never a must have and were at one point considered experimental. I loved them, but flowtype is more pragmatic IMHO.The main use is to prevent the misuse of a component by warning early on in development and offer coded documentation for better understanding(posterity).

Edit: I also want to be clear that proptypes can be stripped for production also.