PropTypes in React

Question

In some examples, I have seen something like this:

Footer.propTypes = {
  completedCount: PropTypes.number.isRequired,
  activeCount: PropTypes.number.isRequ         


        

Answer 1

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.