Putting propTypes first

using PropTypes in react components

Unless you’ve been using react to build apps with no data or props (and if thats the case why are you using react?) then you’ll no doubt know how useful propTypes are to give real time type(ish) checking in you code.

If you’ve never heard of propType before they are a way to specify the ‘type’ of value a prop should be. You’ll then get a warning in your console if a prop is the wrong ‘type’ (i.e. you expects a number but got a string).

Another benefit is that propType validation only runs in development, so your users wont be inundated with console errors in production. If you’re new to propTypes you can read the official docs here

PropTypes for documentation

propTypes are a great way to document what props and what type of props a component expects as well as if those props are required or optional, for example:

propTypes: {
	name: PropTypes.string.required,
	age: PropTypes.number,
	sex: PropTypes.oneOf(['male', 'female']).isRequired,
	address: PropTypes.shape({
		houseNumber: PropTypes.string
		houseName: PropTypes.string
		street: PropTypes.string.isRequired
		city: PropTypes.string.isRequired
		postcode: PropTypes.string.isRequired
	})).isRequired
}

Imagine you are using a component for the first time, you look at the code and you see the above propType.

Straight away you know what props it expects. You can see that name is a required prop which should be a String but that age is an optional number.

You have the shape that an address object needs to be and the properties it needs to contain (and which of it’s properties are required/optional).

If you use this component and don’t pass it props which conform to the above prop types then you’ll get warnings in your console during development.

issues with class and PropTypes

When using the React.createClass method to create our components we can put the propTypes right at the top of the object like this:

export default React.createClass({
	propTypes: {
		// ...
	}

	render() {
		return (
			// ...
		);
	}
});

This means that the propTypes are the first thing you see so you know exactly what props you need to pass to that component. It makes the component easy to use and debug.

With the class syntax though the often used approach is to attach the propTypes to the class once it’s declared, like this:

export default class MyComponent extends Component {
	render() {
		return (<h1>Hello {this.props.name}</h1>);
	}
}

MyComponent.propTypes = {
	name: PropTypes.string.required
};

Although the above example might not look too bad imagine if that class was 200 lines long. You’d need to scroll right to the end to see what props that component needs to function correctly, then scroll back to the top to follow the code.

Having the propTypes at the end like this means it’s also easy to forget they are even there, meaning they can get out of date rendering them pretty useless.

a better syntax for PropTypes in class

Although it’s hardly a secret there is an alternate syntax for propTypes using static. It’s a shame that you rarely it in examples online, even the example in the React docs on propTypes don’t use it.

This syntax allows you to keep your propTypes at the top of your class where they are the most useful, for example:

export default class MyComponent extends Component {
	static propTypes = {
		name: PropTypes.string.required
	};

	render() {
		return (<h1>Hello {this.props.name}</h1>);
	}
}

Now there’s no reason not to use the class syntax for creating react elements and still have you super documenting propTypes at the top of the class.

further reading

Some useful further reading on javascript’s static key word can be found here. Its part of the bigger MDN docs on javascript classes, which can be found here