✅ What Are PropTypes in React?

PropTypes is a runtime type-checking library for React props. It helps developers catch bugs early by showing warnings (in development mode) when a component receives props of the wrong type or when required props are missing.

Think of PropTypes as a safety net for JavaScript-based React applications, especially when you’re not using TypeScript.

⚠️ Important: PropTypes only run during development and do not provide compile-time checks. For stronger guarantees, TypeScript is the preferred solution.

🔎 Why Use PropTypes?

PropTypes improve reliability and maintainability by:

✔ Catching invalid prop types during development
✔ Warning about missing required props
✔ Making components self-documenting
✔ Working perfectly in plain JavaScript projects

They’re especially useful in:

Shared component libraries
Large teams
Legacy React codebases without TypeScript

⚙️ Installation & Import

npm install prop-types

import PropTypes from "prop-types";

🚀 Basic Syntax

You define expected props using a propTypes object on the component:

ComponentName.propTypes = {
  title: PropTypes.string,
  count: PropTypes.number,
  onClick: PropTypes.func.isRequired,
};

Each key represents a prop name
The value defines the expected type
.isRequired enforces mandatory props

🔧 Example 1: Functional Component with PropTypes

import React from "react";
import PropTypes from "prop-types";

function Profile({ name, age, tags, onClick, children }) {
  return (
    <div onClick={onClick}>
      <h2>{name} — {age}</h2>
      <ul>
        {tags.map(tag => (
          <li key={tag}>{tag}</li>
        ))}
      </ul>
      {children}
    </div>
  );
}

Profile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  tags: PropTypes.arrayOf(PropTypes.string),
  onClick: PropTypes.func,
  children: PropTypes.node,
};

Profile.defaultProps = {
  age: 18,
  tags: [],
  onClick: () => {},
};

export default Profile;

Why this is good practice

Clear API for consumers
Safe defaults for optional props
Runtime warnings instead of silent failures

🔧 Example 2: Class Component with Static PropTypes

import React from "react";
import PropTypes from "prop-types";

class Button extends React.Component {
  static propTypes = {
    label: PropTypes.string.isRequired,
    type: PropTypes.oneOf(["button", "submit", "reset"]),
    icon: PropTypes.element,
  };

  static defaultProps = {
    type: "button",
  };

  render() {
    const { label, icon } = this.props;
    return (
      <button type={this.props.type}>
        {icon}
        {label}
      </button>
    );
  }
}

📋 Common PropTypes Validators (Cheat Sheet)

Validator	Description
`PropTypes.string`	String value
`PropTypes.number`	Numeric value
`PropTypes.bool`	Boolean
`PropTypes.func`	Function
`PropTypes.node`	Anything renderable
`PropTypes.element`	Single React element
`PropTypes.elementType`	Component or HTML tag
`PropTypes.oneOf([...])`	Enum of values
`PropTypes.oneOfType([...])`	Multiple allowed types
`PropTypes.arrayOf(type)`	Array of a specific type
`PropTypes.shape({...})`	Object with defined keys
`PropTypes.exact({...})`	Strict object (no extra keys)

🛠 Custom Validator Example

When built-in validators aren’t enough, you can define your own:

MyComponent.propTypes = {
  percent(props, propName, componentName) {
    const value = props[propName];
    if (value == null) return;

    if (typeof value !== "number" || value < 0 || value > 100) {
      return new Error(
        `${componentName}: "${propName}" must be a number between 0 and 100.`
      );
    }
  },
};

This is useful for:

Value ranges
Business rules
Cross-prop validation

✅ Best Practices

Use .isRequired for mandatory props
Always define defaultProps for optional values
Prefer shape or exact over plain object
Keep PropTypes close to the component definition
Use TypeScript for large or long-term projects

🧾 Final Thoughts

PropTypes are a lightweight but powerful tool for improving React app quality. They:

Catch bugs early
Act as living documentation
Improve developer experience in JavaScript projects

While they don’t replace TypeScript, PropTypes are still extremely valuable—especially in JS-only codebases, reusable component libraries, and legacy applications.

What is PropTypes in React? Detailed Explanation with Examples