← Back to React Recipes

What `propTypes` are for

You can use the propTypes property on your component to typecheck the props with which it gets instantiated. Used along with defaultProps, it allows you to enforce and document the types of props your component accepts.

Various type definitions are available in the prop-types package, which you'll need to install separately:

yarn add prop-types

And then, for any component, you can do:

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

class MyComponent extends React.Component {
	render() {
		return `I love the number ${this.props.count}`;
	}
}

MyComponent.propTypes = {
	count: PropTypes.number
};

The React docs contain a list of available types.

Performance

Typechecking is only enabled in the development build of React, so it does not incur any performance penalty in your production-ready application.

The only real impact is that, while they're not evaluated, a lot of propTypes definitions may add a few kilobytes to your bundle. If you want to save that extra bandwidth, there's a Babel plugin that strips the propTypes at build-time.