How to set default props in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Setting default props is essential for creating robust React components that handle missing or undefined prop values gracefully. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented default props in thousands of React components to ensure reliable behavior in enterprise applications. From my expertise, the most modern approach is to use ES6 default parameters in function components. This method provides clear, readable code with TypeScript support while eliminating the need for runtime checks.
Use ES6 default parameters in function components for clean and TypeScript-friendly default props.
function Button({
children = 'Click me',
variant = 'primary',
disabled = false,
onClick = () => {}
}) {
return (
<button
className={`btn btn-${variant}`}
disabled={disabled}
onClick={onClick}
>
{children}
</button>
)
}
Destructure props in the function parameter list and assign default values directly. Default parameters are applied when props are undefined, providing predictable behavior. This approach works seamlessly with TypeScript by marking props as optional in interfaces, eliminating the need for the legacy defaultProps static property while providing better performance.
Best Practice Note:
This is the same approach we use in CoreUI React components for clean, type-safe default prop handling.
