Default Props Default Prop Values
Last updated: 2026-11-02
Default Props Default Prop Values
When a parent does not pass a prop, its value is undefined and the interface may end up blank or throw. Destructuring defaults (or the ?? operator) give optional props a fallback, so a component still behaves sensibly when a prop is missing and its interface stays friendly. Defaults only kick in when the value is undefined, so falsy values such as 0 or an empty string are still honoured.
| Group | Rendering & State |
|---|---|
| Kind | Pattern |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
function Avatar({ name = 'Anonymous', size = 40 }) {
// ↑ destructuring default: applied when the prop is not passed
...
}⚙️ Parameters
| destructuring default | Give a prop a fallback with = inside the parameter destructuring; it only applies when the value is undefined, so 0 and '' are still used as given. |
|---|
Returns：No return value — a coding convention and mental model.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Three rows of avatars: the first shows a large "Alice"; the second shows "Bob", who has no size prop and falls back to the medium default; the third passes nothing at all and shows the default name "Anonymous user" with a medium avatar.💡 Key Points
💡 Tip Prefer destructuring defaults over the deprecated static defaultProps: the syntax is more compact and friendlier to type inference.
ℹ️ Info Watch out for ||, which also treats 0 and '' as "not passed"; use ?? when the optional value may legitimately be falsy.
⚠️ Warning Do not give required props a default value: marking them required in TypeScript or warning clearly during development is better.
🏷️ More Rendering & State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Can I still use defaultProps?
A It is deprecated on function components and no longer supported since React 19; switch to a destructuring default in the parameter list, which means the same thing and reads better.
Q How do I set a default value for a prop?
A The most common form is a destructuring default, function C({ size = 40 }); you can also write const size = props.size ?? 40 inside the function body.
Q What is the difference between || and ?? for defaults?
A || falls back to the default for 0, '' and false as well, while ?? only falls back for null and undefined. Prefer ?? for optional numbers and strings.
