Proper Component Prop Handling with defaultProps

While defaultProps has been a longstanding React feature, its usage patterns and best practices have evolved. Here’s how to properly handle default props in modern React components.

The Traditional defaultProps Approach

// ❌ Legacy approach (still works but not recommended for functional components)
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Greeting.defaultProps = {
  name: 'Guest'
};

Modern Alternatives to defaultProps

1. Default Parameters (Recommended for Functional Components)

// ✅ Modern approach - default parameters
function Greeting({ name = 'Guest' }) {
  return <h1>Hello, {name}!</h1>;
}

2. Destructuring with Defaults

// ✅ Clean destructuring pattern
function UserCard({
  user = {
    name: 'Anonymous',
    avatar: '/default-avatar.png'
  }
}) {
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <p>{user.name}</p>
    </div>
  );
}

3. Fallback Values in JSX

// ✅ Inline fallbacks for simple cases
function ProductPrice({ price }) {
  return <span>Price: {price ?? 'Not available'}</span>;
}

When to Use Each Approach

Approach	Best For	Notes
Default Parameters	Functional components	Cleanest syntax, recommended
Destructuring Defaults	Complex objects	Good for nested defaults
JSX Fallback	Simple display values	Quick inline solution
defaultProps	Class components	Still needed for propTypes

TypeScript Integration

// ✅ TypeScript with default values
interface GreetingProps {
  name?: string; // Optional prop
}

function Greeting({ name = 'Guest' }: GreetingProps) {
  return <h1>Hello, {name}!</h1>;
}

Best Practices

1. Be explicit about optional props in your component’s interface
2. Document default values in JSDoc/TSDoc
3. Consider nullish coalescing (??) for falsy values
4. Use TypeScript to catch missing required props

// Well-documented component with defaults
interface AvatarProps {
  /** 
   * Image URL for the avatar
   * @default '/default-avatar.png'
   */
  src?: string;
  /** Alt text for accessibility */
  alt: string; // Required prop
}

function Avatar({ src = '/default-avatar.png', alt }: AvatarProps) {
  return <img src={src} alt={alt} />;
}

Common Pitfalls to Avoid

1. Forgetting to handle undefined for optional props
2. Overusing defaultProps when simple defaults would suffice
3. Creating complex default objects that are expensive to compute
4. Mutating default objects (always create new objects)

// ❌ Bad - mutating shared default object
const defaultConfig = { theme: 'light' };

function ThemeProvider({ config = defaultConfig }) {
  // Changing config.theme would mutate defaultConfig!
}

Migration from defaultProps

For existing codebases using defaultProps:

1. Class components: Keep using defaultProps if needed
2. Functional components: Migrate to default parameters
3. TypeScript projects: Rely on interface defaults instead

// Before migration
function OldComponent({ color }) {
  // ...
}
OldComponent.defaultProps = {
  color: 'blue'
};

// After migration
function NewComponent({ color = 'blue' }) {
  // ...
}

Remember that modern React favors simplicity and explicitness. Default parameters provide a clearer view of a component’s API right in its signature, making the code more maintainable and self-documenting.