React PropTypes Explained — Type Checking for React Components

In this tutorial, you will learn about React PropTypes Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

React PropTypes provides runtime Type Checking for component props, catching bugs during development by validating that components receive the correct prop types.

What You'll Learn

• How to define propTypes for components
• Available PropTypes validators
• How to set defaultProps
• How to create custom validators
• PropTypes vs TypeScript

Why It Matters

PropTypes catch bugs early by warning when components receive wrong prop types. They are a lightweight alternative to TypeScript for type validation.

import PropTypes from "prop-types";

function UserCard({ user, onSelect, variant, children }) {
  return (
    <div className={`card card-${variant}`} onClick={() => onSelect(user.id)}>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      {children}
    </div>
  );
}

UserCard.propTypes = {
  user: PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    email: PropTypes.string,
  }).isRequired,
  onSelect: PropTypes.func.isRequired,
  variant: PropTypes.oneOf(["compact", "full"]),
  children: PropTypes.node,
};

UserCard.defaultProps = {
  variant: "compact",
};

Expected output: Console warnings if UserCard receives wrong prop types, but the component still renders in production.