What Are React Prop Types?

In this tutorial, you will learn about prop-types and how you can use them to prevent bugs within your ReactJS application. Any application written using React will be made up of many components. Unless you have a very boring website, you will want those components to render in different ways depending on different states and interactions. One way of changing the state within a component is to pass parameters into the component. In the React terminology, this is known as passing props into a component.

If you have a tiny website, thinking about how props are passed around within your application might not be supercritical. As your application grows and the number of components increases there comes a tipping point. At a certain complexity, it's impossible to remember each and every prop for each and every component. When an application is large you need checks and processes to make it easier to understand. You do not want to waste time figuring out what props are essential for a component to work. It can be hard to understand what props are essential, which ones are optional and even what the expected value of a prop should be. This is where prop-types can help.

Let's say you have a prop called, displayTitle. It would be very easy to forget if displayTitle was a boolean used to decide to display a title, or it was a prop that contained the value of title. When you have hundreds of props you need a way of documenting them. Using prop-types is a technique that you can use with React to help make passing props into components easier (you could also use TypeScript!). If you are new to prop-types and would like to learn how to improve your code, then read on.

How To Install prop-types

prop-types used to come as part of the core react framework. As of React v15.5.0 prop-types were relegated into its own package called, prop-types. The reason for this is that prop-types are not the only way to do prop validation in React, TypeScript is another good option.

The way in which prop-types work, is that when a component is loaded, React checks the prop-types definition against the props being passed into the component. If the framework finds a missing prop, or, an invalid value is passed for a prop, a warning is displayed when the code is being compiled. Another useful thing to know is that prop-typesare only validated when your application is set within development mode. As prop-types checking adds latency to your application's performance it is omitted in production mode. To install prop-types you can use this command:

An example of a basic prop-type definition is shown below:

The code above should hopefully be fairly straightforward to understand. On line 16, the components 'prop-types' definition is defined. This definition is done by setting propTypes() to an object. This object will contain the components props schema. Here you define what props the component expects and what each type needs to adhere to. The isRequired function can be thought of as a guard pattern. When you set isRequired you tell the framework that this prop needs to exist when the component is loaded, otherwise, it should throw an error. A more complex example of how a prop-type definition could look is shown below:

In the definition above, we define props of type boolean, string, array, function() and shape(). The full list of available types you can validate against can be found in the documentation here. The shape prop-type is a really useful one to know about as it can help you write better code. Shape-type maps to objects. This means instead of passing random object in as props you can be very specific. I think defining object props is the most important part of prop definitions, as they can be so custom and varied. Defining your object shapes will make your code much easier to understand!

Anti-Patterns To Use With React-Props

When you start adding prop-type definition into all your components it is very easy to fall into hidden traps. Due to the hierarchical nature of React, it is common that you will need to pass down similar props to multiple places. A common mistake developers new to writing prop-type definitions tend to take is defining the prop definition from scratch in each component. This is an anti-pattern that leads to lots of duplication. One way to remove this duplication is to centralize common prop-types. Creating a central area to define your common prop-types and then import them as needed will remove the duplication and promote standardisation. For example, let us say that you needed to pass an address around:

To use this address proptype within a component, you can import it like so:

Creating custom shapes can dramatically help reduce the amount of code you have to write. Remember that when working with React components (well all cod in general) you should always strive to pass the minimum props down through your components as this will make maintenance a lot easier later on. Happy Coding 🤘