CODEWITHSUNDEEP
reactjsreact-proptypes
Benjamin Li
Benjamin Li

Reputation: 1697

PropTypes in React

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?

Upvotes: 5

Views: 7850

Answers (3)

Yilmaz
Yilmaz

Reputation: 49182

In React, you should write reusable components and to do that you have to define their interface in the clearest possible way.If you want your components to be reused across the application, it is crucial to make sure that our components and their parameters are well-defined and straightforward to use. You ALWAYS HAVE TO VALIDATE your data.

Let's imagine you have an ecommerce website and you want to display your products in your homepage. For this, you need to create Product component and inside of it, you have to validate the data to prevent yourself displaying "true" where you want to display "number" for price. Here is an example:

Product.propTypes = {
  product: PropTypes.shape({
    id: PropTypes.number,
    img: PropTypes.string,
    price: PropTypes.number,
    inCart: PropTypes.bool,
  }).isRequired
};

Using these features will greatly reduce the amount of time spent debugging applications. The shape function lets us declare objects with nested properties and, for each one of those, we can define their types.

If you realize that you are declaring too many props for a single component, and they are not related to each other, it may be better to create multiple components, each one with fewer props and responsibilities.

In the production version of React, the propTypes validation is disabled for performance reasons.

Upvotes: 1

Urasquirrel
Urasquirrel

Reputation: 1585

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.

Upvotes: 3

finalfreq
finalfreq

Reputation: 6980

How we use propTypes at our work is to have a better understanding of each component right from the get go. You can see the shape of the component based off the props you pass in and get a better idea of how it works.

Its also great with the .isRequired because you will get warnings if it wasn't included when the component was created. It will also give warnings if a prop was expected to be one type but was actually passed down as something different.

It is by no means necessary but it will make developing alongside others much easier since you can learn about what the component expects to be passed down and in what form. This becomes much more critical when there are new components being created almost daily and you are trying to use a component made by someone else and have never touched it before.

Upvotes: 1

Related Questions