Default Props

Default values for props go right next to the prop name in the destructuring pattern — no separate `defaultProps` needed.

3 min read Level 1/5 #react#props#defaults

What you'll learn

Set default values for props
Know when defaults apply (undefined only)

Defaults go in the destructuring pattern. No separate defaultProps static field, no ternary inside the body.

The Syntax

function Avatar({ size = 48, alt = "", src }) {
  return <img src={src} alt={alt} width={size} height={size} />;
}

<Avatar src="/me.png" />                  // size 48, alt ""
<Avatar src="/me.png" size={96} />        // size 96
<Avatar src="/me.png" alt="Ada" size={32} />

The default applies only when the prop is omitted or undefined. Passing null or false does NOT trigger the default.

function Greeting({ name = "stranger" }) {
  return <p>Hello, {name}!</p>;
}

<Greeting />              // "Hello, stranger!"
<Greeting name={undefined} /> // "Hello, stranger!"  (treated as omitted)
<Greeting name={null} />  // "Hello, !"            (null is explicit)
<Greeting name="" />      // "Hello, !"            (empty string is explicit)

Defaults With Renames

If you rename, the default still goes at the end:

function Item({ id: itemId, name = "Untitled" }) {
  return <li id={itemId}>{name}</li>;
}

Defaults With `...rest`

Defaults work alongside the rest pattern:

function Button({ kind = "secondary", ...rest }) {
  return <button className={`btn btn--${kind}`} {...rest} />;
}

The Old `defaultProps` Static (Skim)

Before destructuring defaults were the norm, components used:

function Avatar(props) { ... }
Avatar.defaultProps = { size: 48 };

React 19 has deprecated this static for function components. Use destructuring defaults — they work for any kind of component, are easier to read, and don’t require a separate file pass.

Up Next

There’s one special prop every component receives whether you ask for it or not — children.

The `children` Prop →