Why is this an issue?

In JavaScript, props are typically passed as plain objects, which can lead to errors and confusion when working with components that have specific prop requirements. This lacks type safety and clarity when passing props to components in a codebase.

By declaring propTypes on a component, developers get a development-mode runtime check: React validates each render’s props against the declared types and emits a console.error when a prop is missing or of the wrong type. This makes wrong usages visible during development without affecting production behavior. It also serves as inline documentation of what each component expects.

This is a development-time runtime check, not a compile-time guarantee. If you need actual compile-time prop validation, use TypeScript (or Flow).

How to fix it

Declare a propTypes object on the component listing every expected prop and its type. The import style depends on the React version.

Code examples

Noncompliant code example

// Between React v15.5 and v19
import PropTypes from 'prop-types';

function Hello({ firstname, lastname }) {
  return <div>Hello {firstname} {lastname}</div>; // Noncompliant: 'lastname' type is missing
}
Hello.propTypes = {
  firstname: PropTypes.string.isRequired
};

// Before React v15.5
import React from 'react';
const { PropTypes } = React;

class Greet extends React.Component {
  render() {
    return <div>Hello {this.props.firstname} {this.props.lastname}</div>; // Noncompliant: 'lastname' type is missing
  }
}
Greet.propTypes = {
  firstname: PropTypes.string.isRequired,
};

Compliant solution

// Between React v15.5 and v19
import PropTypes from 'prop-types';

function Hello({ firstname, lastname }) {
  return <div>Hello {firstname} {lastname}</div>;
}
Hello.propTypes = {
  firstname: PropTypes.string.isRequired,
  lastname: PropTypes.string.isRequired,
};

// Before React v15.5
import React from 'react';
const { PropTypes } = React;

class Greet extends React.Component {
  render() {
    return <div>Hello {this.props.firstname} {this.props.lastname}</div>;
  }
}
Greet.propTypes = {
  firstname: PropTypes.string.isRequired,
  lastname: PropTypes.string.isRequired,
};

Exceptions

On React 19 and later, propTypes is silently ignored on function components and the rule does not apply. The React team recommends migrating to TypeScript for prop validation. See the React 19 upgrade guide.

Resources

Documentation