React Default Props

What is Default Props in React?

Default props supply a fallback value when the parent omits a prop. In function components you set them with default values in the destructuring pattern; the old Component.defaultProps object is deprecated for function components in React 19.

Why Default Props matters

Sensible defaults let a component be used with two props in the simple case and eight in the complex one, instead of forcing every caller to spell out every option.

Default Props example

function Badge({ text, color = 'teal', size = 'md', rounded = true }) {
  return (
    <span className={`badge badge-${color} badge-${size} ${rounded ? 'rounded' : ''}`}>
      {text}
    </span>
  );
}

<Badge text="New" />                    // teal, md, rounded
<Badge text="Closed" color="gray" />    // gray, md, rounded

How this works

A default applies only when the prop is undefined. Passing null explicitly does not trigger the default — null is a real value.

Key points to remember

• Use destructuring defaults; defaultProps on function components is removed in React 19.
• Defaults do not fire for null, only for undefined or a missing prop.
• Avoid object or array literals as defaults if identity matters — a new object is created on every render.

Common mistakes with Default Props

• Relying on defaultProps in new code and getting a React 19 deprecation warning.
• Passing null expecting the default to kick in.
• Using items = [] as a default and then passing it to a memoised child, defeating the memoisation.