Learn the concept
State
State is internal, mutable data managed within a component that triggers re-renders when changed. Props are external, read-only inputs passed from parent components. State is for data that changes over time; props are for configuring components.
State:
Props:
Key Rules:
React 19 State Features:
useActionState — manage state with form actions (pending, error, result)useOptimistic — show optimistic UI while async operations completefunction Counter({ initialCount, step }) { // Props: external config
const [count, setCount] = useState(initialCount); // State: internal
return (
<div>
<p>Count: {count}</p>
{/* Props used for configuration */}
<button onClick={() => setCount(count + step)}>
Add {step}
</button>
</div>
);
}
// Usage - props configure the component
<Counter initialCount={0} step={1} />
<Counter initialCount={100} step={10} />Using state to track cart items, quantities, and totals with real-time UI updates
Managing form state across multiple steps with validation and navigation
State-driven dashboard components that update with WebSocket data
Build a todo app demonstrating useState, state lifting, and functional updates
Implement undo/redo functionality using state history with useReducer