Photo by on chuttersnap Unsplash In the we learned about the differences between and and how to use them in your React/React Native application. previous article props state 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 . It is React’s in-built type-checker. PropTypes Props in a component can be type-checked using PropTypes. Do I really need to define PropTypes? You can define components without . But, without 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. PropTypes PropTypes I highly recommend using in your react native components, to avoid unexpected glitches to the user. PropTypes Defining PropTypes for a component Let’s take a look at the example below. The component ‘ ’ has a set of defined . MyComponent PropTypes The props here are defined with their respective for type-checking. PropTypes 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 is a specific Javascript type. prop Anyone using this component will now know all the 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. props isRequired — Is this required? In our example, all the are required for the component . By default the for a component are optional. By adding the keyword, we are making sure a warning is generated if the is not provided to the component. props MyComponent props isRequired prop It is always safe to use the for props in the component to make sure we are not missing any that are needed by the component. isRequired props 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 to the component. props If you do not use , then the other option would be to set default values to your props. isRequired When you miss passing a required to the component, a warning is generated like below. This ensures that the developer does not miss any required to the component. prop props Sample warning generated by react on missing a required prop. What are defaultProps ? Default values can be assigned to the props using . When a component does not receive it’s props, then it resorts to the that has been assigned. defaultProps defaultProps In the above code snippet you can see all the default values that have been assigned to the props for . It is not necessary to assign defaultProps if you have marked your props as required. MyComponent Tip: Always define explicit defaultProps for all optional props. It is interesting to note that the type-checking using happens after the are assigned. So it type checks the default values assigned to the props as well. Neat! PropTypes defaultProps Next time you code a component, make sure to add your type-checking using React’s PropTypes. This article was originally published at and http://adhithiravichandran.com/ https://codeburst.io/ If you liked this article, follow me for more tutorials and articles on React Native and ReactJs.
