Both hold data that affects what a component renders, but they differ in who owns the data and whether it can change.
Both hold data that affects what a component renders, but they differ in who owns the data and whether it can change.
// `step` is a PROP — given by the parent, the child only reads it.
// `count` is STATE — owned here, changes on click, causes a re-render.
function Counter({ step }) {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + step)}>
{count}
</button>
);
}
// Parent decides the step and passes it down:
<Counter step={5} />
Data flows down (parent → child via props) and changes flow up (child asks the parent to change something via a callback prop like onChange). This one-way flow is what makes React apps predictable.
props.x = 1) is a bug — React won't re-render and you've broken the parent's ownership. To "change a prop", call a callback the parent gave you so the parent updates its own state and passes a new value down.A library of IT interview questions with detailed answers — from Junior to Senior.
Donate