How to Add Typechecking to Your React Components

A simple way to help reduce bugs

Alex Ritzcovan
Jan 20 · 4 min read
Photo by Martin W. Kirst on Unsplash

Adding Typechecking to your React components is easy and super helpful when it comes to catching potential bugs.

When you design your React application and the components that make up the application, you do so knowing that in most cases you will be passing data from parent components to child components.

Each child component that accepts props from the parent has an expectation of the kind of data that will be passed to it. There is an implicit agreement made when defining the child components interface but there isn’t any way to enforce it.

If the wrong type of data is passed, we have a type conflict. The child component expected data of one type but received something other than that type.

In a strongly typed language like C# or Java, the compiler would catch this error at compile time and notify the programmer. JavaScript does not provide this nicety but we can add this kind of checking to our components.

If you’re interested in learning more about JavaScripts Dynamic type system, check out the docs here.


I have a simple app that displays some information about pets. Here’s what the final app looks like.

Completed app — Killer UI don't ya think?

The app is made up of 2 main files — MyPets.js and Pet.js.

MyPets.js
Pet.js

In the parent component, we have an array of pet objects. In the render method, we are using array.map() on line 29 to iterate over the collection and create a Pet component for each element of the array. Each pet component is passed a key and a pet from the array.

In the Pet.js file, we have a stateless functional component defined that accepts the props and returns some UI.

The way this example is currently configured is correct and everything renders correctly as you can see in the screen shot above.

If we modify line 29 of the MyPets.js file to read as follows:

{this.state.pets.map(pet => (<Pet key={pet.id} pet={pet.name} />))}

We have introduced a bug. The child component expects pet to be an object, not a string. What happens when the page reloads?

intentional error — no error messages!

We have a lot of undefined values and as you can see in the console, no errors. This is the beauty (or the horror) of a dynamically typed language like JavaScript. The child component knows that it's getting props but it has no expectation of datatype so anything goes. Let’s give the child component the superpowers it needs to tell the programmer when they’ve made a mistake.

Adding typechecking is easy. Let’s look at the completed Pet.js file with the typechecking code added.

The first requirement is to import it and that’s what we do on line 2.

We then assign the special propTypes property starting on line 12.

Here we specify the name of the prop that we want to check, pet in this case, and we specify what we expect the value to be: Proptypes.object

With that change made in our code, let's see what we get when we reload the page now.

As expected, we’re still getting undefined on the page but we are also getting a really useful warning in the console.

This is great! The check is telling us that it got a string when it expected an object. This will make it so much easier to hunt down bugs!

If I go back and remove the bug that we intentionally created, everything is working properly and we have successfully added typechecking to our child component.

Time to ask for a raise! 😃

  1. JavaScript is a dynamically typed language and does not give us compile-time type checking.
  2. Typechecking is an easy way to help reduce errors in our code.
  3. React child components have an expectation of data type when they’re designed but no way to validate the type without adding propTypes.
  4. To add typechecking to your child components, first import PropTypes from the prop-types library and assign the special propTypes property to your component.

We’ve only scratched the surface of what’s possible. There are a lot of options when working with PropTypes. To learn more about Typechecking with PropTypes, check out the React documentation.

As always, thanks for reading and be sure to check out my other posts here on Medium.

DailyJS

JavaScript news and opinion.

Alex Ritzcovan

Written by

Senior software consultant, writer, husband, and father. I enjoy coding, photography, and sharing what I learn with others.

DailyJS

DailyJS

JavaScript news and opinion.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade