⚛️ Default Props in React

? Quick Overview

Default Props allow you to set fallback values for props in a React component. If a parent component does not pass a specific prop, React automatically uses the default value defined in defaultProps or via parameter defaults.

This keeps components stable, predictable, and easy to reuse, even when some data is missing.

⚛️ React  ·  ? Props  ·  ? Fallback Values

? Key Concepts

• Default Props provide fallback values when a prop is not passed.
• They help avoid rendering undefined or broken UI.
• Can be defined using Component.defaultProps or parameter defaults.
• Work for both functional and class components.
• Especially useful for optional props and reusable UI components.

? Syntax & Theory

Traditionally, default props are defined using the defaultProps property on the component:

For functional or class components:

• MyComponent.defaultProps = { propName: defaultValue };
• React uses these values only when the parent does not provide the corresponding props.

In modern React, especially with functional components, it is very common to use parameter defaults instead:

• function MyComponent({ propName = "Default" }) { ... }

? Example: Basic Default Props

Here is a simple component that greets the user. If no name is provided, it falls back to "Guest".

// Welcome.js - component with default props
function Welcome({ name }) {
  return <h2>Welcome, {name}!</h2>;
}

Welcome.defaultProps = {
  name: "Guest"
};

export default Welcome;

// App.js - using Welcome with and without props
import Welcome from "./Welcome";

function App() {
  return (
    <div>
      <Welcome />
      <Welcome name="Riya" />
    </div>
  );
}

export default App;

? Why Use Default Props?

• ✅ Prevents undefined values when props are missing.
• ✅ Keeps components predictable and self-contained.
• ✅ Avoids extra conditional checks for missing values.
• ✅ Improves component reusability and robustness.
• ✅ Makes components safer to use across large codebases.

? Default Props with Multiple Values

You can define default values for multiple props in the same component. If any of them are not provided by the parent, React falls back to these defaults.

// Product.js - multiple default props for a product card
function Product({ name, price, inStock }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Price: ₹{price}</p>
      <p>Availability: {inStock ? "In Stock" : "Out of Stock"}</p>
    </div>
  );
}

Product.defaultProps = {
  name: "Unknown Product",
  price: 0,
  inStock: false
};

export default Product;

? Default Props in Class Components

Default props work the same way with class components. You still attach a defaultProps object to the component.

// Greeting.js - class component with default props
import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return <h2>Hello, {this.props.name}!</h2>;
  }
}

Greeting.defaultProps = {
  name: "Visitor"
};

export default Greeting;

If no name is passed to Greeting, it will show: "Hello, Visitor!"

? Using Default Props with Destructuring

Instead of using defaultProps, you can assign default values directly inside the function parameters. This is a modern and concise approach.

// Welcome.js - using parameter default instead of defaultProps
function Welcome({ name = "Guest" }) {
  return <h2>Welcome, {name}!</h2>;
}

export default Welcome;

Here, if name is not provided, it automatically takes the value "Guest" from the function parameter default.

⚠️ Note for React 18+

The defaultProps property still works, but for functional components defined with ES6 syntax (especially when using destructuring), using parameter defaults is now the preferred and more idiomatic approach.

For class components or older codebases, defaultProps is still very common and valid.

? Common Use Cases

• UI components like buttons, cards, and alerts with optional labels.
• Reusable layout components where some props are rarely overridden.
• Fallback images, placeholder text, or default configuration values.
• Forms where certain fields can be safely pre-filled with defaults.