跳到主要内容

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

AspectPropsState
SourceParent componentComponent itself
MutabilityRead-onlyMutable
OwnershipParent ownsComponent owns
FlowDown (parent → child)Local to component
UpdatesParent changessetState/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