CODEWITHSUNDEEP
javascriptreactjsecmascript-6
JohnnyQ
JohnnyQ

Reputation: 5127

What is the importance of PropTypes in React?

I'm still learning React and can't grasp the importance of PropTypes. Can anyone give their thoughts what are the benefits of defining your PropTypes? I've read the discussion about this on the React documentation but I can't grasp the advantages of keeping PropTypes aside from seeing console error/warnings when types doesn't match. It says on the documentation

When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time you need to build some UI, you can write much less code. This means faster development time, fewer bugs, and fewer bytes down the wire.

So aside from the benefits I have a few other questions:

  1. When defining PropTypes you are definitely writing more code which contradicts that statement in bold.
  2. Another question is, are PropTypes only applicable to child components since parent components don't usually have props?
  3. If so, how do we check the types of the states of the parent components, is there a StateTypes so to speak?

Upvotes: 28

Views: 6592

Answers (2)

jayarjo
jayarjo

Reputation: 16754

  1. PropTypes let you validate your props, which otherwise is not possible, since JavaScript is loosely typed language.

  2. You can have props wherever you need them, including parents. Or do not have them at all. Often props are the only way to pass some values or callbacks from parents to children and grandchildren (in fact it is recommended way).

  3. There's no StateTypes.

Upvotes: 1

Pranesh Ravi
Pranesh Ravi

Reputation: 19133

React revolves around the concept of components. A whole webpage should be broken down into components and each components will interact with each other through props.

So, these are all the advantages of using PropTypes

  • Validate the prop passed to a child and warn the developer when a wrong props is passed, which may break your app.
  • As a team, when a member of the team creates a component, you won't know what to do with that unless you see the PropTypes

PropTypes is not compulsory.

[EDIT] Answers for the questions in order

  1. Yes, you'll be writing extra code. But, if you need to validate your props, which is extra code, you don't need to do it by yourself. Validations will be taken care by React itself.
  2. Not Exactly, there's a difference between Parent and Root component. Parent component can be a child of another Parent which can be a child of another. So, call it as Root component which will be at the top of the UI tree. With this definition, you can say, PropType is only applicable to Parent and Child, not Root component.
  3. You don't need to check the stateType because state is with in a component's scope. But, props are passed from a component to another. So, it doesn't make sense to validate state of a component as it is not shared across components. Even if it is shared, that can be only done through props.

Hope it helps...

Upvotes: 32

Related Questions