react/forbid-prop-types

PropTypes.any, PropTypes.array, and PropTypes.object check almost nothing. users: PropTypes.array accepts an array of anything, so React never warns about a bad item. arrayOf, objectOf, and shape say what's inside.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/forbid-prop-types" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"react/forbid-prop-types" = ["error", {
  forbid = ["any", "array", "object"],
  checkContextTypes = false,
  checkChildContextTypes = false,
}]

Examples#

example.jsx1 problem

import PropTypes from "prop-types";

function UserList({ users }) {
  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

UserList.propTypes = {
  users: PropTypes.array.isRequired,
};

The rule also looks inside shape({ ... }) and at the arguments of a prop type:

example.jsx2 problems

import PropTypes from "prop-types";

function Card({ tags, owner }) {
  return <div title={owner.name}>{tags.length}</div>;
}

Card.propTypes = {
  tags: PropTypes.arrayOf(PropTypes.object),
  owner: PropTypes.shape({ name: PropTypes.any }),
};

example.jsxNo problems

import PropTypes from "prop-types";

function UserList({ users }) {
  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

UserList.propTypes = {
  users: PropTypes.arrayOf(
    PropTypes.shape({ id: PropTypes.number, name: PropTypes.string }),
  ).isRequired,
};

Options#

Option	Default	What it does
`forbid`	`["any", "array", "object"]`	The prop types to report. Your list replaces the default one.
`checkContextTypes`	`false`	Also check `contextTypes`.
`checkChildContextTypes`	`false`	Also check `childContextTypes`.

With forbid: ["any"], object is allowed and any is still reported:

example.jsxwith { "forbid": ["any"] }1 problem

import PropTypes from "prop-types";

function Card({ style, extra }) {
  return <div style={style}>{extra}</div>;
}

Card.propTypes = {
  style: PropTypes.object,
  extra: PropTypes.any,
};

example.jsxwith { "checkContextTypes": true }1 problem

import PropTypes from "prop-types";

function Title(props, context) {
  return <h1 style={context.theme}>{props.text}</h1>;
}

Title.contextTypes = {
  theme: PropTypes.object,
};

When not to use it#

React 19 ignores propTypes. If you type your props with TypeScript instead, you don't need this rule.