Detailed explanation
Default props are fallback values a component uses when a parent does not supply a prop or passes undefined. In modern React function components, define these values with JavaScript parameter destructuring: `type Props = { size?: 'sm' | 'lg' }; function Button({ size = 'sm' }: Props) { return <button className={size}>Save</button>; }`. Here, the question mark makes size optional for callers, while the default ensures that size is available inside the component. This keeps the public API flexible without repeatedly checking for missing values.
Destructuring defaults follow JavaScript rules, not special React behaviour. The default applies to an omitted prop or undefined, but not to null, false, zero, or an empty string. With strict null checks enabled, TypeScript rejects null for this size type, but unexpected runtime input can still arrive from JavaScript or external data. A fallback expression using `value || fallback` behaves differently because it replaces every falsy value; `value ?? fallback` replaces only null and undefined. Choosing deliberately avoids accidentally overwriting valid values such as zero.
Prop validation today usually means describing the component contract with TypeScript. The union `'sm' | 'lg'` catches unsupported sizes, and required properties catch missing inputs during type checking. Editors also provide autocomplete and immediate feedback. However, TypeScript types are erased before execution: they do not inspect props at runtime or validate API responses. For untrusted external data, use runtime checks or a schema validator at the data boundary, then pass validated values into components. Type safety and runtime validation solve related but different problems.
Historically, React components used defaultProps for defaults and the separate prop-types package for runtime development warnings. React 19 removed defaultProps support for function components and stopped performing propTypes checks; class components still support defaultProps. Older projects may therefore contain patterns that were valid for their React version. Interviewers generally look for modern function-component syntax, a clear distinction between compile-time checks and runtime validation, and awareness that defaults handle missing values rather than correcting invalid ones.
Key points to remember
- Use parameter destructuring defaults in modern function components.
- Defaults apply to missing or undefined props, not null or other falsy values.
- TypeScript describes optional props, required props, and allowed values.
- TypeScript checks types before execution; external data still needs runtime validation.
- React 19 removed function-component defaultProps support and React's propTypes checks; class defaultProps remain supported.
Common mistakes candidates make
- Claiming TypeScript validates incoming props or API responses at runtime.
- Assuming a default replaces null or corrects an unsupported value.
- Presenting PropTypes and function-component defaultProps as the recommended approach without mentioning React version differences.
Likely follow-up questions
Does a default value automatically make a TypeScript prop optional?
No: in an explicit Props type, mark the property optional with `?` if callers may omit it. A destructuring default does not change a required property in that declared contract.
What if an API returns size as 'xl'?
The default will not replace 'xl' because the value is not undefined. Validate the API response at runtime and either reject the unsupported value or map it to an allowed fallback.
Should an older project immediately remove PropTypes?
Check its React version, JavaScript usage, and migration plan first; older React versions can still use PropTypes for development warnings. When moving to React 19, do not rely on React to execute propTypes checks, and retain explicit runtime validation wherever it is needed.
Interview tip: Start with the destructuring example, explain undefined versus null, and then distinguish TypeScript checking from runtime validation.