दुवैले डेटा राख्छन् जो कम्पोनेन्टले के रेन्डर गर्छ भन्ने कुरालाई असर गर्छ, तर ती डेटाको मालिक को हो र यो परिवर्तन हुन सक्छ वा छैन यसमा फरक छ।
// `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 अप्लिकेशनहरूलाई पूर्वानुमेय बनाउँछ।
props.x = 1) एक बग हो — React पुन: रेन्डर हुन्न र तपाईंले अभिभावकको स्वामित्व तोडेको छ। "prop परिवर्तन गर्न", अभिभावकले दिएको callback कल गर्नुहोस् ताकि अभिभावकले आफ्नो state अपडेट गर्छ र नयाँ मान तल पास गर्छ।