دونوں وہ ڈیٹا رکھتے ہیں جو اس کو متاثر کرتا ہے کہ ایک component کیا render کرتا ہے، لیکن وہ ڈیٹا کی ملکیت اور کیا یہ بدل سکتا ہے میں مختلف ہیں۔
// `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} />
ڈیٹا نیچے کی طرف (والد → بچہ props کے ذریعے) اور تبدیلیاں اوپر کی طرف (بچہ والد کو onChange جیسی callback prop کے ذریعے کچھ بدلنے کو کہتا ہے) بہتی ہیں۔ یہ ایک طرفہ بہاؤ وہی ہے جو React apps کو قابل تنبؤ بناتا ہے۔
props.x = 1) ایک bug ہے — React دوبارہ render نہیں کرے گا اور آپ نے والد کی ملکیت کو توڑ دیا ہے۔ "ایک prop کو بدلنے" کے لیے وہ callback کو کال کریں جو والد نے آپ کو دیا ہے تاکہ والد اپنی اپنی state کو اپڈیٹ کرے اور نیچے کی طرف ایک نیا قدر پاس کرے۔