How to set default props in React
Łukasz HoleczekFollow Łukasz Holeczek on GitHubConnect with Łukasz Holeczek on LinkedInFollow Ł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.
functionButton({children='Click me',variant='primary',disabled=false,onClick=()=>{}}){return(<buttonclassName={`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.
Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.
About the Author
Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 25 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.
With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.
Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.
Learn more about CoreUI’s solutions and see how your business can benefit from working with us.
