Båda innehåller data som påverkar vad en komponent renderar, men de skiljer sig åt i vem som äger datan och om den kan ändras.
// `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 flödar nedåt (förälder → barn via props) och ändringar flödar uppåt (barn ber föräldern att ändra något via en callback prop som onChange). Detta envägflöde är det som gör React-appar förutsägbara.
props.x = 1) är ett fel — React kommer inte att omrendera och du har brustit i förälderns ägarskap. För att "ändra en prop" anropar du en callback som föräldern gav dig så att föräldern uppdaterar sitt eget state och skickar ett nytt värde nedåt.