Type-Checking Props with PropTypes
Declaring PropTypes
After importing PropTypes from the prop-types package, you attach a propTypes object to your component listing the expected type of each prop. During development, React checks incoming props against this and logs a warning if something doesn't match.
Note: Mark props that must always be provided with .isRequired, like PropTypes.string.isRequired.
Warning: PropTypes warnings only appear in the browser console -- they never stop your app from rendering.
Example: Declaring PropTypes
// Run in your local React project (npm install required)
import PropTypes from 'prop-types';
function Greeting({ name, age }) {
return <p>{name} is {age} years old.</p>;
}
Greeting.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
};⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Common PropTypes Validators
The prop-types library provides validators for all common JavaScript types -- string, number, bool, array, object, func -- plus more advanced ones like PropTypes.oneOf for a fixed set of allowed values. This lets you be precise about exactly what shape of data a component expects.
Note: Use PropTypes.oneOf([...]) for props that should only ever be one of a specific list of strings, like a size prop.
Warning: PropTypes checks run only in development mode -- they are stripped out of production builds for performance.
Example: Common PropTypes Validators
// Run in your local React project (npm install required)
import PropTypes from 'prop-types';
function StatusBadge({ status }) {
return <span className={`badge-${status}`}>{status}</span>;
}
StatusBadge.propTypes = {
status: PropTypes.oneOf(['active', 'inactive', 'pending']).isRequired,
};⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
PropTypes vs TypeScript
PropTypes checks prop types while the app is running in the browser, whereas TypeScript checks types while you're writing the code, before it even runs. TypeScript catches more mistakes earlier, which is why many modern React projects prefer it over PropTypes.
Note: If your project already uses TypeScript, you generally don't need PropTypes too -- TypeScript's types cover the same need at compile time.
Warning: Switching from PropTypes to TypeScript requires rewriting prop declarations in a different syntax -- they aren't interchangeable line-for-line.
Example: PropTypes vs TypeScript
// Run in your local React project (npm install required)
// PropTypes (runtime check):
Greeting.propTypes = { name: PropTypes.string };
// TypeScript (compile-time check) equivalent:
type GreetingProps = { name: string };
function Greeting({ name }: GreetingProps) {
return <p>Hello, {name}</p>;
}- Forgetting to install and import the separate
prop-typespackage -- it's not built into React itself. - Using PropTypes and expecting them to stop the app from running -- they only log warnings, they don't block anything.
- Confusing PropTypes (runtime checking) with TypeScript (compile-time checking) -- they solve a similar problem differently.
- PropTypes let you declare the expected type of each prop a component receives.
- They come from the separate
prop-typesnpm package, not React core. - Mismatched prop types produce a console warning in development, not an error.
- Many modern projects use TypeScript instead of PropTypes for stronger type safety.
No browser-specific restrictions -- prop-types works in any React version but must be installed as a separate npm package.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: