Q4: What is the fundamental difference between State and Props?
Props (short for properties) are read-only input parameters passed down from a parent component to a child component. State is internal data managed locally within a component that can change over time in response to user actions or network events, triggering re-renders.
Props vs State Usage
function CounterContainer() {
const [count, setCount] = useState(0); // Local State
return <CounterDisplay value={count} onIncrement={() => setCount(count + 1)} />; // Passed as Props
}
function CounterDisplay({ value, onIncrement }) {
return <button onClick={onIncrement}>Count: {value}</button>;
}💡 CounterContainer owns the count state and passes it down alongside updater callbacks as props to CounterDisplay.
Key Takeaways
- Props flow unidirectionally downward and are immutable by the child component.
- State is local, mutable via state updater functions, and triggers re-renders on update.
Knowledge Check
What happens if a child component attempts to reassign props.title = 'New Title' directly?