What is the purpose of defaultProps in React?

React Beginner Questions - Set 5

It filled missing props with defaults. For function components it has been replaced by destructuring defaults, which the example shows side by side.

Example

// Current approach — works today and is type-friendly
function Badge({ label, tone = 'neutral', size = 'md' }) {
  return <span className={`badge badge--${tone} badge--${size}`}>{label}</span>;
}

// Legacy approach — still valid on class components
function OldBadge(props) {
  return <span className={`badge badge--${props.tone}`}>{props.label}</span>;
}
OldBadge.defaultProps = { tone: 'neutral' };

// Note: defaultProps is ignored for function components in
// React 18.3+/19 builds (with a deprecation warning).

What to notice

Destructuring defaults apply only when the prop is `undefined`, not when it is `null`.
Defaults are a fallback, not a contract — `propTypes` or TypeScript is what documents types.
On class components `defaultProps` still works and is the conventional place for them.

← Back to the question list