Default props
📚 What are Default Props? Default props give a component a fallback value when a prop is not provided. Without defaults, missing props cause 'undefined' to appear in your UI. There are two modern ways: default parameter values in the function signature, or the logical OR operator inside the functi…
Appy Says…
What if a component's prop isn't passed? Instead of crashing or showing 'undefined', you can define fallback values. Default props make components resilient — they work sensibly even when optional data is missing.
What are Default Props?
Default values for props mean a component has sensible fallbacks when optional props aren't provided. In modern React, this is done with JavaScript default parameter syntax in destructuring.
- •
function Button({ label = 'Click me', variant = 'primary' }) { ... } - •If parent passes
<Button />— label = 'Click me', variant = 'primary' - •If parent passes
<Button label='Save' />— label = 'Save', variant = 'primary' - •Old way:
Button.defaultProps = { label: 'Click me' };— deprecated in React 19 - •TypeScript: combine with interface:
interface ButtonProps { label?: string } - •Nested default:
({ config = { size: 'md', color: 'blue' } })
Think of it like Minecraft default game settings
When you create a new Minecraft world, difficulty defaults to Normal, view distance to 10 chunks. You can change them, but if you don't they're sensible defaults. Default props work the same — sensible fallbacks unless explicitly overridden.
How It Works
- •1. Destructure props with = defaults:
({ title = 'Untitled', count = 0 }) - •2. Parent can pass any combination; missing props get defaults
- •3. Passing
undefineduses the default; passingnulldoes NOT (null overrides) - •4. For TypeScript: mark optional props with
?:title?: string - •5. Complex objects as defaults: define outside the component to avoid recreating on every render
- •6. Avoid
Button.defaultProps— it's removed in React 19
Real-World Examples
- •Avatar:
({ src = '/default-avatar.png', size = 40 })— always shows something - •Pagination:
({ page = 1, pageSize = 20 }) - •Toast notification:
({ duration = 3000, type = 'info' }) - •shadcn Button:
({ variant = 'default', size = 'md' })
Key Facts
- •
undefinedtriggers the default;nulldoes not — a common source of bugs - •
Button.defaultPropsis deprecated as of React 18.3 and removed in React 19 - •Default props improve component resilience and reduce defensive
??checks inside render - •In TypeScript,
?optional props + default = the ideal pattern
Watch Out!
Using an object literal as a default directly in destructuring — ({ config = {} }) — creates a new object reference on every render. This can cause unnecessary re-renders of child components that receive it. Define the default object outside the component: const DEFAULT_CONFIG = {};.
Remember
Use destructuring defaults: function Comp({ size = 'md', label = 'OK' }). Avoid Component.defaultProps. Remember: undefined uses default; null does not.
What You Learned
- •Default props via destructuring:
({ label = 'OK', variant = 'primary' }) - •undefined triggers the default; null does not; mark optional with ? in TypeScript
- •Unlocks: resilient reusable components that work with or without every optional prop
Key Facts
- →
undefinedtriggers the default;nulldoes not — a common source of bugs - →
Button.defaultPropsis deprecated as of React 18.3 and removed in React 19 - →Default props improve component resilience and reduce defensive
??checks inside render - →In TypeScript,
?optional props + default = the ideal pattern
Real-World Examples
Remember
Use destructuring defaults: function Comp({ size = 'md', label = 'OK' }). Avoid Component.defaultProps. Remember: undefined uses default; null does not.
Quick Quiz
Default props are for?