Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?
like image 442
JohnnyQ Avatar asked Sep 24 '16 14:09

JohnnyQ


People also ask

Why do we use PropTypes in React?

PropTypes are simply a mechanism that ensures that the passed value is of the correct datatype. This makes sure that we don't receive an error at the very end of our app by the console which might not be easy to deal with.

Do you need PropTypes with typescript?

Typescript and PropTypes serve different purposes. Typescript validates types at compile time, whereas PropTypes are checked at runtime. Typescript is useful when you are writing code: it will warn you if you pass an argument of the wrong type to your React components, give you autocomplete for function calls, etc.

What is PropTypes node in React?

PropTypes are a way to validate the values that are passed in through our props. node We can pass anything that can be rendered, such as numbers, string, DOM elements, arrays, or fragments that contain them using the React.

How are PropTypes used in functional components?

Firstly, npm install / yarn add the prop-types package if you haven't already. Then, add your propTypes (and defaultProps too if required) after the stateless functional component has been defined, before you export it.


1 Answers

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

like image 94
Pranesh Ravi Avatar answered Sep 18 '22 01:09

Pranesh Ravi