propTypes and defaultProps

In the earlier section, I talked about how my linter acted up when I tried to pass an unvalidated prop.

Here, if we say that the userIsLoaded is not required, then we would need to add this to our code:

static defaultProps = {

userIsLoaded: false,

}

So anytime we have a PropType that’s used in our component, we need to set a propType for it. As in, we need to tell React that userIsLoaded is always going to be a boolean value.

And again if we say that userIsLoaded is not required then we’re going to need to have a default prop. If it is required, then we don’t have to define a default prop for it. However, the rule also states that you shouldn’t have an ambiguous propTypes like object or array.

This is why we are using shape to validate user , which has another an id inside it, which has a propType of string , and the entire user object is required.

Making sure you have your propTypes and defaultProps set up on every single component that uses props will go a long way.

The moment those props don’t get the data that they are expecting, your error log will let you know that you are either passing in something incorrectly or something that is expecting it is not there, making error finding just way easier especially if you are writing a lot of reusable components. It also makes them a little bit more self-documenting.

Note:

Unlike earlier versions of React, proptypes are no longer included inside React and you will have to add them separately to your project as a dependency.

Click here to know more: