How to Typecheck React Components using Prop-Types
Typechecking is great for catching bugs as your app grows. For checking the entire app you should use Typescript or Flow, but if you don’t want to use another language during development then you can use built in React features (now supported through the prop-types npm package) to typecheck in your projects.
Why do we Typecheck in React?
Before we dive into PropTypes, let’s talk about typechecking and strictly and dynamically typed languages. Typechecking is a tool that is great for catching bugs before they make their way into the production app. But what is typechecking?
Typechecking is the process of verifying and enforcing constraints for the acceptable types of variables throughout your project or app. It is basically a way of saying what type a value should have at any point in your code and letting the editor or compiler check this for you. Having inconsistent variable types is an issue that is inherent to dynamically typed languages like Javascript, but does not occur in strictly typed languages.
For strictly typed languages such as Java, the variable’s type is permanently set on variable declaration. From this point on, this variable cannot change types. This differs from dynamically typed languages such as Javascript where the variable can change types after it is declared. In Javascript it is possible to declare a variable as a string, then perform operations on it to turn it into an integer. Thus types are dynamic in Javascript as they can change after declaration.
React PropTypes
As mentioned above, the prop-types npm package extends capability to our React code to check the types of props as they are passed into components. This package is a dev dependency that can be called in every React component module that imports props. You can use this on props from any location, whether parent component of global state, to ensure the props are the correct type.
There are a number of different items you can check and enforce on your props. Below you can see a code snippet of a basic:
As you can see, before being able to use the propTypes type checking, we first need to import the prop-types package. This package gives us access to the Object methods we need to check our props.
In this example, I have created a simple article content component that may be a template for displaying a blog post. This will accept props including an author, published date and whether it is a draft. To use the prop-types package, we call propTypes on our component and set it equal to an object of prop, rule pairs.
In this object we have access to every prop passed into the component and have our choice of validators including string, number, Boolean, element, array and func among others. Along with declaring which type a prop should be, we can chain on other rules including if the prop isRequired for this component, or operators such as oneOf() if you want to make sure the prop has a specific value.
One of the more interesting functions of prop-types is the shape() method. This method accepts an object with the props you want to check for and will ensure that this exact object shape is passed into your component.
For cases where you may not have props passed in, but you want the component to still have data to display, you can use another prop-type method in defaultProps which allows you to set certain props to a default value.
When you are working with a large app, typechecking becomes an incredibly useful tool. Just like with writing good unit and integration tests, plan your typechecks before you start coding and everything will be a lot easier.
