defaultProps in React — Complete Guide (Human-written, SEO-friendly)

defaultProps lets you define fallback values for component props so your component behaves predictably when its parent omits a prop. Think of it as a safe default — a small safety net that prevents undefined values and makes reuse easier.

🔹 What is `defaultProps`?

defaultProps is a React feature that assigns default values to props when no value is passed by the parent. If a prop is completely omitted, React uses the corresponding value from defaultProps.

🔹 Why use `defaultProps`?

Prevents undefined and reduces runtime errors.
Makes components more robust and self-documenting.
Provides sensible defaults for reusable components.

🚀 Syntax — Class Components

class MyButton extends React.Component {
  render() {
    return ;
  }
}

MyButton.defaultProps = {
  label: "Click Me"
};

🚀 Syntax — Functional Components

function MyButton(props) {
  return ;
}

MyButton.defaultProps = {
  label: "Click Me"
};

🔧 Example 1 — Button with Default Label

Two buttons: first uses the default label, second overrides it.

import React from "react";

function Button(props) {
  return ;
}

Button.defaultProps = {
  label: "Default Button"
};

export default function App() {
  return (
        );
}

🔧 Example 2 — User Profile

Useful when you want a fallback for missing data (e.g., guest view).

function UserProfile({ name, age }) {
  return (
    {name}  
    Age: {age} 
  );
}

UserProfile.defaultProps = {
  name: "Guest User",
  age: 18
};

🔹 Important Notes & Gotchas

Only used when prop is omitted. If the parent passes prop={undefined}, the default will not be applied.
For functional components, many teams prefer ES6 default parameters (see next section) because they're simpler and work naturally with TypeScript.
defaultProps works for both class and function components, but behavior in TypeScript + generics can be tricky — prefer typed defaults or parameter defaults in many cases.

✅ ES6 default parameters (preferred for functional components)

In modern React (and with TypeScript), you often see defaults applied right in the function signature. This is concise and avoids some typing pitfalls.

function Button({ label = "Click Me" }) {
  return ;
}

📚 When to use `defaultProps` vs ES6 defaults?

Use	Why
`defaultProps`	Works for class components and older codebases; centralizes defaults as static property.
`function params = value`	Recommended for functional components, simpler with TypeScript and destructuring.

🧾 TypeScript notes

If you use TypeScript, prefer explicit prop types and parameter defaults. defaultProps can be used, but typing can be verbose or surprising with React.FC. Example alternative:

type ButtonProps = { label?: string };

function Button({ label = "Click Me" }: ButtonProps) {
  return ;
}

✅ Best Practices

Prefer ES6 defaults for functional components (({ prop = value })).
Use defaultProps in class components or when keeping a consistent pattern in older codebases.
Document defaults in component prop comments or README so consumers know expected behavior.
Never rely on defaults to mask bad component design — defaults should be sensible, not cover missing required data.
When using TypeScript, prefer typed parameter defaults over defaultProps to avoid type ambiguity.

📌 SEO Title, Description & Keywords (copy into page head)

SEO Title: defaultProps in React — Complete Guide with Examples

Meta description: Understand React's defaultProps: how it works, examples for class and functional components, ES6 default alternatives, and TypeScript tips.

Keywords: React defaultProps, default props React, ES6 default props, React functional component defaults, React class component defaultProps, TypeScript default props

🧾 Conclusion

defaultProps is a small but useful feature to keep components safe when props are omitted. For modern functional components prefer ES6 parameter defaults, especially if you use TypeScript. For class components or legacy code, defaultProps remains a sensible and readable choice.

🔎 Further reading & quick tips

Use parameter defaults for destructured functional components: cleaner and works well with TypeScript.
Remember: passing {undefined} will not use your default — omit the prop instead.
Keep defaults small and sensible so components remain predictable.

React defaultProps Explained with Examples (2025 Guide)