React PropTypes

Alex Moline
2 min readJan 18, 2021

As programmers, it is very important to have a wide arsenal of framework knowledge. Every Framework is different and some are better tailored to cater to specific niches. One popular framework React, which was released in 2013, has a very interesting method of testing data using a system called proptypes!

To understand the usage of React’s proptype, it is important to understand the prop part of it. Props, short for properties, serve as an object that allows React developers to pass in attributes. Props are uni-directional meaning that data can only be passed from the parent component to the child component.

An example of a PropType

Now that props are explained, it's time for proptypes. Proptypes serve as a validation barrier for props, meaning they check for the value of a prop to see if it correlates to the correct value. A way to think of this is with a game of catch. Say you are playing in a park with a friend. Naturally, you would pass the ball to your friend, not a random person. Proptypes work like this since just like a random person, your computer will be confused since the designated value of the prop is incorrect. At the time of prop declaration, a value will be made be it a string, object, boolean, or even a React element. A proptype will search for a matching value for a given prop and check if the data matches the declared datatype. One good way to determine if something to be checked can be checked with a proptype is to remember that “if it can be rendered then it can be checked”. Proptypes are useful for developers as they allow for a simpler debugging experience in large complex workflows. For instance, if you are working on a project and your partner gives you a prop that accepts only strings and you pass a number, you will receive an error whereas in other frameworks, like AngularJS, you might miss the error since Angular is asynchronous.

Example of a proptype failure.

React’s feature of proptypes is revolutionary as it allows for the validation of data which eases debugging for teams in complex work environments.

--

--