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:
function 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} />