Photo by chuttersnap on Unsplash
In the previous article we learned about the differences between props and state and how to use them in your React/React Native application.
In this article, we will dive into PropTypes.
When you write a large application, data validation plays a pivotal role. React supports data validation through PropTypes. It is React’s in-built type-checker.
Props in a component can be type-checked using PropTypes.
Do I really need to define PropTypes?
You can define components without PropTypes. But, without PropTypes or some form of type checking, we run into the risk of passing in a wrong data type to a component, which could cause a crash or some unexpected behavior in your application.
I highly recommend using PropTypes in your react native components, to avoid unexpected glitches to the user.
Defining PropTypes for a component
Let’s take a look at the example below. The component ‘MyComponent’ has a set of defined PropTypes.
The props here are defined with their respective PropTypes for type-checking.
There are different types of validators in the above example (string, array, func, number, bool and so on..). This enables you to declare that a prop is a specific Javascript type.
Anyone using this component will now know all the props and the respective types required by it. React would throw an error on the console, when an incorrect datatype is passed to the component. This will enable us to catch errors during development time.
isRequired — Is this required?
In our example, all the props are required for the component MyComponent. By default the props for a component are optional. By adding the isRequired keyword, we are making sure a warning is generated if the prop is not provided to the component.
It is always safe to use the isRequired for props in the component to make sure we are not missing any props that are needed by the component.
When you start coding a component, it is always easy to mark all the props as required. This helps in handling null cases in your code, and also makes sure that you do not forget to pass in the props to the component.
If you do not use isRequired, then the other option would be to set default values to your props.
When you miss passing a required prop to the component, a warning is generated like below. This ensures that the developer does not miss any required props to the component.
Sample warning generated by react on missing a required prop.
What are defaultProps ?
Default values can be assigned to the props using defaultProps. When a component does not receive it’s props, then it resorts to the defaultProps that has been assigned.
In the above code snippet you can see all the default values that have been assigned to the props for MyComponent. It is not necessary to assign defaultProps if you have marked your props as required.
Tip: Always define explicit defaultProps for all optional props.
It is interesting to note that the type-checking using PropTypes happens after the defaultProps are assigned. So it type checks the default values assigned to the props as well. Neat!
Next time you code a component, make sure to add your type-checking using React’s PropTypes.
This article was originally published at http://adhithiravichandran.com/ and https://codeburst.io/
If you liked this article, follow me for more tutorials and articles on React Native and ReactJs.