दोनों डेटा रखते हैं जो प्रभावित करते हैं कि एक कंपोनेंट क्या रेंडर करता है, लेकिन वे डेटा का मालिक कौन है और क्या इसे बदला जा सकता है में भिन्न हैं।
// `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 के माध्यम से) और परिवर्तन ऊपर बहते हैं (चाइल्ड पैरेंट से कुछ बदलने के लिए कहता है एक callback prop के माध्यम से जैसे onChange)। यह एक-तरफा प्रवाह वह है जो React ऐप्स को अनुमानित बनाता है।
props.x = 1) एक बग है — React पुनः-रेंडर नहीं करेगा और आपने पैरेंट की मालिकी को तोड़ दिया है। एक prop को "बदलने" के लिए, callback को कॉल करें जो पैरेंट ने आपको दिया ताकि पैरेंट अपनी खुद की स्थिति को अपडेट करे और एक नया मान नीचे पास करे।