Her ikisi de bir component'in ne render edeceğini etkileyen verileri tutar, ancak verilerin sahibi kim olduğu ve değişip değişemeyeceği açısından farklılık gösterirler.
// `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} />
Veriler aşağıya doğru (parent → child props aracılığıyla) ve değişiklikler yukarıya doğru (onChange gibi callback prop aracılığıyla child parent'ten bir şeyi değiştirmesini ister) akar. Bu tek yönlü akış React uygulamalarını tahmin edilebilir hale getirir.
props.x = 1) bir hatadır — React yeniden render etmez ve parent'in sahipliğini bozmuşsunuz. "Bir prop'u değiştirmek" için parent'in size verdiği callback'i çağırın, böylece parent kendi state'ini günceller ve aşağıya yeni bir değer geçer.