← Back to React Recipes

Ways to use `defaultProps`

defaultProps is an object you set on your component to provide default values for your properties. If your component gets initialized without a property (meaning its value is undefined), you'll get its default value instead. Note that null is a valid value that will not fall back to the default.

The main purpose of defaultProps is to plug any “holes” in your properties.

One thing I like to do is provide empty functions to any callbacks my component accepts, so that when I invoke them I don't need to check whether they've been passed:

class Slider extends React.Component {
	onChange() {
		// no need to check that this.props.onChange exists
		this.props.onChange(this.state.value);
	}
}

Slider.defaultProps = {
	onChange: value => {}
};

defaultProps is also a good way to document the properties your component accepts:

Slider.defaultProps = {
	// A number that defines the minimum value for the slider
	min: 0,

	// A number that defines the maximum value for the slider
	max: 100,

	// A callback that gets invoked each time the slider's value changes
	onChange: value => {}
};

You may even go further and document optional properties, whose default value is undefined:

class Slider extends React.Component {
	onChange() {
		this.props.onChange(this.state.value, this.props.property);
	}
}

Slider.defaultProps = {
	// When defined, the property will be sent along with the value
	// on the `onChange` callback
	property: undefined
};