Why Default props in React? - Purpose & Use Cases

The Big Idea

What if your components could never break from missing information?

The Scenario

Imagine you build a React component that shows a user profile. Sometimes you forget to pass the user's name, so the component shows nothing or breaks.

The Problem

Without default props, you must check every prop manually to avoid errors or empty spaces. This makes your code messy and easy to forget, causing bugs and bad user experience.

The Solution

Default props let you set fallback values for your component's inputs. If a prop is missing, React uses the default automatically, keeping your UI consistent and your code clean.

Before vs After

✗ Before

function Profile({ name }) {
  return <p>{name ? name : 'Guest'}</p>;
}

✓ After

function Profile({ name = 'Guest' }) {
  return <p>{name}</p>;
}

What It Enables

It enables components to work smoothly even when some data is missing, improving reliability and developer happiness.

Real Life Example

Think of a greeting card app that says "Hello, Guest" if no name is given, instead of showing a blank or error.

Key Takeaways

Default props prevent UI breaks from missing data.

They keep your code simpler and easier to read.

They improve user experience by providing sensible fallbacks.