How to use PropTypes in React

As your applications scale and grow in complexity, maintaining type safety becomes paramount to catch any potential bugs.

React PropTypes provide a way to check the properties that your component receives at runtime, making sure they align with the types you expect. In short, PropTypes help improve code reliability and debugging.

This article will explain what PropTypes are and how to use them effectively in your React applications with a few code examples.

What are PropTypes in React?

PropTypes in React is a type-checking mechanism that validates the types of props passed to a React component.

Props (short for properties) allow you to pass data between components in React, making them integral for building reusable and dynamic interfaces. They allow parent components to pass values down to child components as arguments.

Since props can contain values of any data type, passing one of an unexpected type could lead to runtime errors. The React PropTypes package allows you to define the exact types for each prop you pass to a component; think of it as similar to form validation but for props.

PropTypes used to be a part of React. It became a standalone package as of React 15.5+, so if you want to use PropTypes, you will need to install it separately.

When to use PropTypes in React

React PropTypes validates props whilst your application is running; it doesn't check types during development or before code execution. It throws warnings in the console during runtime if a prop is of the wrong type, so it doesn't prevent incorrect types from being passed — it just warns you.

TypeScript, on the other hand, validates types before the code even runs (at compile time) and prevents type issues, helps debug, and improves reliability, so if you're looking for a type safety tool to aid development, it's better to learn TypeScript and use that. It’s worth noting that as of React 19, support for PropType checks has been completely removed and usage will be silently ignored, so now the recommended way to check prop types is through TypeScript, or you can use other schema validation libraries such as Zod.

That said, React PropTypes can still be useful in certain situations: for instance, if you are using a React version lower than 19, and if you are dealing with external data in production that cannot be predicted during development, React PropTypes can pick up on if the data is null, undefined, or of an unexpected type. It will then give you a warning like the one below, which is very useful for debugging purposes.

Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Profile`, expected `string`.

You can also use custom validation logic to throw errors if the incorrect types are detected.

So, React PropTypes help with debugging and catching prop-related issues by providing runtime warnings. While this improves code quality during development, it does not prevent type issues or enforce strict type safety like TypeScript does.

React PropType types

The prop-types package (supported by versions of React from 15.5 to 18) provides type-checking for primitive data types such as string, number, bool, func, symbol, and any.

You can also validate arrays and objects as props:

You can use PropTypes inside arrayOf to specify the expected type inside an array:

Or, to define the expected properties inside an object, you can use PropTypes.shape:

Sometimes you might need custom validation logic for needs beyond the standard validation types:

The above code sets a custom validation function for the age property that checks that the value is above 18, and throws an error if not.

If you want a prop to be able to receive multiple types, you can use PropTypes.oneOfType:

In the above code, the prop status can either be a string or a number. This can be useful for dynamic or API-driven props.

If a prop is optional, you can provide a default value with the defaultProps feature of the PropTypes package:

This will ensure that your props will have sensible defaults and prevent undefined errors from occurring in components.

Example: How to use PropTypes in React

The following example will explain how to download PropTypes into your React project and show an example of the warnings given if you pass the wrong type.

First create a new React project with the following command:

npm create vite@latest my-proptypes-app --template react

In the terminal   

• ✔ Select a framework: › React

• ✔ Select a variant: › JavaScript

Change into the new project’s directory and install dependencies:

Make sure to downgrade from React 19 to React 18 (PropTypes have been removed from React 19):

Install the prop-types package:

npm install prop-types

First of all, replace the code in main.jsx with the following, removing strict mode, which might block any runtime warnings:

In the src directory create a new file called Pet.jsx with the following code:

The above Pet component is just a display component that accepts three props. PropTypes is used to specify what type each of those props should be.

Replace the code in App.jsx with the following:

App.jsx displays the Pet component and passes the correct props through two strings and a number. It hooks up a text input to change the legs prop; if you type text into it, that should generate a warning that the wrong type has been passed through, which demonstrates the type of warnings that PropTypes will provide you with.

Run the application with the following command:

npm run dev

Go to http://localhost:5173/ in your browser.

Change the number of legs to something non-numeric like "six", and you should see a warning in the console:

You can find the full code for this example here.

Build end-to-end type safe apps faster with Contentful

While React PropTypes help validate your props at runtime, ensuring data consistency from its source is also important.

Building complex CMS interfaces isn’t necessarily difficult, but it’s time-consuming — especially when managing multiple data validations and external sources. With Contentful, you can skip the heavy lifting by using a content platform to structure your back end without coding every form — though you can do this if needed.

On the client side, GraphQL and TypeScript ensure that fetched data is typed and structured correctly, reducing runtime errors and improving maintainability.

Leverage Contentful’s flexibility to ship features faster, ensure type safety, and streamline your development workflow.

Take a tour

Chat with our team

We'll show you how our composable content platform can enhance 1:1 customer connections and drive growth for your business.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.