Ambele dețin date care afectează ce render o componentă, dar diferă în cine deține datele și dacă pot fi modificate.
- props sunt transmise în componentă din componenta părintelui. Sunt read-only — componenta nu trebuie să le modifice niciodată.
Ambele dețin date care afectează ce render o componentă, dar diferă în cine deține datele și dacă pot fi modificate.
// `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} />
Datele curg în jos (părintele → copilul prin props) și schimbările curg în sus (copilul cere părintelui să schimbe ceva printr-o callback prop precum onChange). Acest flux unidirecțional este ceea ce face aplicațiile React previzibile.
props.x = 1) este o greșeală — React nu va re-render și ai rupt proprietatea părintelui. Pentru a "schimba o prop", apelezi o callback pe care părintele ți-a dat-o pentru ca părintele să-și actualizeze propriul state și să transmită o valoare nouă în jos.