In Virendana Ui, I was building a user dashboard with 12 different card components. Each card was nearly identical, but I'd copy-pasted the entire component just to change the title or add an icon. My senior of My College took one look and said, "You know props exist, right?"
That was my wake-up call. Props aren't just a React feature — they're the difference between maintainable code and a copy-paste nightmare. If you've been building components the hard way, this will change everything.
What are React Props?
Props are React's way of passing data between components. Think of them as function arguments, but for your UI components.
When I explain props to new developers, I use this analogy: imagine you built a coffee machine (component). Props are like the settings you can adjust — coffee strength, milk type, sugar level. Same machine, different outputs based on what you pass in.
Props solve the reusability problem: "I built this component once, now I want to customize it everywhere I use it."
Why Use Props?
Without props, every component is hardcoded. I learned this the hard way when I needed to internationalize an app with 50+ hardcoded text components. Props turn static components into configurable, reusable building blocks. The alternative is maintaining dozens of nearly identical components that differ by one line of code.
Real Example Without Props (The Problem)
const Welcome = () => {
const greeting = 'Welcome to LearnVirendana';
return <h1>{greeting}</h1>;
};
const App = () => (
<div>
<Welcome />
</div>
);
This works, but it's inflexible. I've seen codebases with WelcomeHome, WelcomeLogin, WelcomeDashboard — all doing the same thing with different text. That's 15 components when you need one.
✅ Now with Props (The Solution)
const Welcome = (props) => {
return <h1>{props.text}</h1>;
};
const App = () => {
const greeting = "Welcome to Virendana";
return (
<div>
<Welcome text={greeting} />
</div>
);
};
Now you have one flexible component instead of many rigid ones. Change the prop, change the output. This is how you build scalable UIs that don't become maintenance nightmares.
Use Cases for Props
| Use Case | Prop Example |
|---|---|
| Custom text | <Button label="Click Me" /> |
| Toggle visibility | <Modal open={true} /> |
| Event handling | <Form onSubmit={handleSubmit} /> |
| Passing components | <Card footer={<Button />} /> |
| Styling with config | <Box bg="dark" rounded /> |
Props Destructuring (Cleaner & Prettier)
const Welcome = (props) => {
return <h1>{props.text}</h1>;
};
After writing props.something for the hundredth time, you'll want destructuring:
const Welcome = ({ text }) => {
return <h1>{text}</h1>;
};
Destructuring isn't just cleaner syntax — it documents exactly which props your component expects. When I review code, I can immediately see a component's dependencies.
Optional: Default Props
const Welcome = ({ text = "Hello Guest" }) => {
return <h1>{text}</h1>;
};
Default props saved me from countless "Cannot read property of undefined" errors. When components have sensible defaults, they're more resilient and easier to use. I always add defaults for optional props that would break the UI if missing.
Bonus Tip: Props Are Read-Only
Props are immutable within the receiving component. React enforces this to maintain predictable data flow. I've seen developers try to modify props directly — it won't work and it breaks React's rendering assumptions.
If you need to change something based on a prop, either compute it in render or use state to track local changes.
When to Use Props vs State
| Use This For | Use Props | Use State |
|---|---|---|
| Data passed down | ✅ | ❌ |
| Local component data | ❌ | ✅ |
| Controlled components | Both | Both |
| Updates on user input | ❌ | ✅ |
Virendana UI Uses Props Everywhere
In my component library Virendana UI, every component is built with props-first thinking. When you have 50+ components in a library, props aren't just nice to have — they're essential for creating a consistent, flexible API.
Each component accepts props for size, variant, disabled state, and custom styling. This approach scales because developers can customize without touching the source code.
✅ Summary – What You Learned About Props
- Props enable component reusability and configuration
- They flow data from parent to child components
- Destructuring makes prop usage cleaner and more explicit
- Props are immutable within the receiving component
- Default props prevent undefined-related crashes
Questions I Get About React Props Explained
1. What are props in React?
Props are React's mechanism for passing data and configuration between components, primarily from parent to child.
2. Are props the same as state?
No. Props are external inputs to a component, while state is internal data that the component manages and can update.
3. Can I change props inside a component?
No. Props are read-only. Modifying them would break React's data flow and cause unpredictable renders.
4. What's props destructuring?
It's extracting specific props directly in function parameters: const Component = ({ title, onClick }) => {} instead of accessing props.title
5. What happens if I don't pass a required prop?
React won't crash, but your component might render incorrectly or throw runtime errors. Use default props or TypeScript to catch this during development.