Components & Props

React PropTypes and Type Checking

PropTypes is a runtime type checker that warns in the console when a component receives a prop of the wrong type. TypeScript does the same job at compile time and is the modern default, but PropTypes still appears in many JavaScript codebases.

What is PropTypes and Type Checking in React?

Why PropTypes and Type Checking matters

Type errors on props are among the most common React bugs — a string where a number was expected, an object where an array was. Catching them at the boundary saves a long debugging session.

PropTypes and Type Checking example

Runtime checks with prop-types

JSX

import PropTypes from 'prop-types';

function JobCard({ title, stipend, tags }) { /* … */ }

JobCard.propTypes = {
  title: PropTypes.string.isRequired,
  stipend: PropTypes.number,
  tags: PropTypes.arrayOf(PropTypes.string),
};

The same contract in TypeScript

TSX

interface JobCardProps {
  title: string;
  stipend?: number;
  tags?: string[];
}

export function JobCard({ title, stipend, tags }: JobCardProps) { /* … */ }

TypeScript catches the mistake in your editor before the code ever runs, and needs no extra runtime dependency — which is why new projects choose it over PropTypes.

Key points to remember

PropTypes checks run in development only and are stripped from production builds.
React 19 removed PropTypes from the react package; install the standalone prop-types package if you need it.
For new projects prefer TypeScript; use PropTypes when maintaining an existing JavaScript codebase.

Common mistakes with PropTypes and Type Checking

Expecting PropTypes to throw — it only logs a console warning.
Assuming PropTypes validates data fetched at runtime; it only checks what a parent passes in.