Props vs State
Props = data in, State = internal data
Props
"Data passed from parent"
Props are read-only data passed from parent to child components.
"Props are read-only data passed from parent components to child components, enabling component reusability and data flow."
State
"Internal component data"
State is mutable data managed internally by a component.
"State is internal component data that can change over time, triggering re-renders when updated."
Key Differences
Props = external, State = internal
| Aspect | Props | State |
|---|---|---|
| Source | Parent component | Component itself |
| Mutability | Read-only | Mutable |
| Ownership | Parent owns | Component owns |
| Flow | Down (parent → child) | Local to component |
| Updates | Parent changes | setState/useState |
"Props flow down from parent and are read-only, while state is internal, mutable, and owned by the component."
Props Example
Parent passes, child receives
function Parent() {
const name = "John";
return <Child name={name} />;
}
function Child({ name }) {
return <div>Hello, {name}</div>;
}
"Props are passed from parent to child, received as function parameters in child components."
State Example
useState manages internal data
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
}
"State is managed with useState hook, allowing components to maintain and update internal data."
When to Use Props
Configuration · Data from parent
Use props for:
- Configuration data
- Data from parent
- Callback functions
- Static values
"Use props for configuration, data from parent, callback functions, and values that don't change within the component."
When to Use State
Internal data · User input · UI state
Use state for:
- User input (form fields)
- UI state (open/closed, selected)
- Component-specific data
- Data that changes within component
"Use state for user input, UI state, component-specific data, and any data that changes within the component."
Props Are Immutable
Don't modify props directly
// ❌ Wrong - don't modify props
function Child({ count }) {
count++; // Error!
}
// ✅ Right - use state if needed
function Child({ initialCount }) {
const [count, setCount] = useState(initialCount);
setCount(count + 1); // OK
}
"Props are immutable - don't modify them directly. Use state if you need to modify values based on props."
9️⃣ Lifting State Up
Move state to common parent
When siblings need same state:
- Move state to parent
- Pass down as props
- Update via callbacks
"Lift state up to common parent when multiple components need the same state, passing down as props."
Props Drilling
Passing props through unused components
If props go through many levels:
- Consider Context API
- Use state management
- Restructure components
"If props are passed through many unused components, consider Context API or state management instead."
"Props are read-only data passed from parent to child, enabling reusability. State is internal, mutable data managed by the component. Props flow down, state is local. Use props for configuration and parent data, state for user input and UI state. Props are immutable - use state if modification needed. Lift state up when siblings need same data."
🧠 Ultra-Short Cheat Sheet
Props = read-only, from parent
State = mutable, internal
Props flow down
State is local
Props for configuration
State for user input/UI
Props immutable
Lift state when needed