Adding type to React components with PropTypes

React components can pass down and receive information as properties, or props, to manipulate data that is rendered on screen. But when developing an app in React.js, we can often run into type errors that are common when programming in a language that isn’t strongly typed.

Wouldn’t it be great if you could set your prop types manually to be validated in-browser?

Enter PropTypes

One of React’s 86 devDependencies, PropTypes is a runtime type checking tool for React props and similar objects. (Fun fact: React itself depends on the prop-types package.) Directly from the prop-types npm README:

You can use prop-types to document the intended types of properties passed to components. React […] will check props passed to your components against those definitions, and warn in development if they don’t match.

In short, you can set the PropTypes of any component you write, and the types will be validated on render as you develop.

PropTypes helping a girl out IRL

I worked on a team of four on Coreo, a choreography assist tool that used an ML-trained pose estimation library to help dancers. After a while, a couple of our components started growing and growing in complexity. Looking back at this project a few weeks out, I realized how difficult it was to parse what was going on! Along with inline documentation using JSDoc, being able to type check with PropTypes was immensely valuable in helping me figure out what was actually happening with our code.

Let’s see an example

My client is a bird sanctuary, and I have set up some components to track whether or not the birds have been fed. On some parent component, I’ve set up the infrastructure to make an API call to get all the birds from the sanctuary, and set them to local state on mount.

For each SingleBird component, I’ll need to pass down a few things — the selected bird, and feedBird.

I’ve used React hooks here, but a class component / other handling of state would work similarly.

Let’s say that there are multiple components on my much larger bird sanctuary site that might point to this singleBird component, and I can’t be sure that the props are passed in correctly each time. We can check this by adding PropTypes to the singleBird component, or generally, the component that is receiving the props.

We know that we want a bird, which will be an object with a numericid, string name, and booleanfed, and a feedBird function which will update our bird’s feeding status in our database.

Now, this component will expect its props to be in the specified types. There are a few other types that can be used here:

• PropTypes.array
• PropTypes.bool
• PropTypes.func
• PropTypes.number
• PropTypes.object
• PropTypes.string
• PropTypes.symbol

You can also have a prop be one of a variety of types that you can determine:

PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.bool
])

You can also validate types within data structures. For arrays, you want to use the PropTypes.arrayOf(/* include your type here */) , and for objects, you can define the entire shape of the thing!

PropTypes.shape({
  id: PropTypes.number,
  name: PropTypes.string,
  fed: PropTypes.bool
})

If we preview our component in the browser, nothing should have changed, assuming we have passed down the correct props. However, if we pass down the incorrect props, an error will be shown in our console:

Helpful error to locate your mistyped props!

Default Props

You can also set the default value of the props of a component. We can do this in the BirdSanctuary component we viewed earlier. Rather than have the default array of birds set as an example in my useState(), I can set defaultProps for this component at the bottom.

Why would I want more errors?

While PropTypes does increase your chances of seeing errors, they’re quite valuable! Being able to see PropTypes’ validation errors help to pinpoint issues and help debug when you encounter rendering errors in a react component.

Note: prop type warnings will NOT appear in the production build of your code.

Want your linter to remind you to add prop types?

Use AirBnB’s eslint config.

Summary

PropTypes are not required in a component, but they make components more understandable and readable, especially when working on larger components and in teams. It’s a form of inline documentation that helps a developer understand what inputs and outputs are needed when props are involved.

Resources

I found this article by Flavio Copes quite useful when learning PropTypes. I also looked at this article on css-tricks.

More officially: Type-checking with PropTypes in React Documentation

Generate documentation with PropTypes using styleguideist

Thanks to Dave Cohen for his assistance and mentorship as well!