How to apply validation on props in React?

When the application is running in development mode, React will automatically check all props that we set on components to make sure they have correct type. If the type is incorrect, React will generate warning messages in the console. It's disabled in production mode due to performance impact. The mandatory props are defined with isRequired.

The set of predefined prop types:

1. PropTypes.number
2. PropTypes.string
3. PropTypes.array
4. PropTypes.object
5. PropTypes.func
6. PropTypes.node
7. PropTypes.element
8. PropTypes.bool
9. PropTypes.symbol
10. PropTypes.any

We can define propTypes for User component as below:

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

class User extends React.Component {
static propTypes = {
 name: PropTypes.string.isRequired,
 age: PropTypes.number.isRequired,
};

render() {
 return (
   <>
     <h1>{`Welcome, ${this.props.name}`}</h1>
     <h2>{`Age, ${this.props.age}`}</h2>
   </>
 );
}
}

Note: In React v15.5 PropTypes were moved from React.PropTypes to prop-types library.

Modern Recommendation: While PropTypes are still supported, TypeScript is now the industry standard for type checking in React applications. Consider using TypeScript for better type safety, IDE support, and compile-time error detection.

The Equivalent Functional Component

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

function User({ name, age }) {
return (
 <>
   <h1>{`Welcome, ${name}`}</h1>
   <h2>{`Age, ${age}`}</h2>
 </>
);
}

User.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
};

Modern TypeScript Version

import React from "react";

interface UserProps {
name: string;
age: number;
}

function User({ name, age }: UserProps) {
return (
 <>
   <h1>{`Welcome, ${name}`}</h1>
   <h2>{`Age, ${age}`}</h2>
 </>
);
}