ਦੋਵੇਂ ਡਾਟਾ ਰੱਖਦੇ ਹਨ ਜੋ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ ਕਿ ਇੱਕ ਕੰਪੋਨੈਂਟ ਕੀ ਰੈਂਡਰ ਕਰਦਾ ਹੈ, ਪਰ ਇਹ ਕੌਣ ਡਾਟਾ ਦੀ ਮਾਲਕੀ ਰੱਖਦਾ ਹੈ ਅਤੇ ਕੀ ਇਹ ਬਦਲ ਸਕਦਾ ਹੈ ਨਿਯਮ ਵਿੱਚ ਵੱਖਰੇ ਹਨ।
// `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} />
ਡਾਟਾ ਹੇਠਾਂ ਵੱਲ ਵਹਿੰਦਾ ਹੈ (parent → child via props) ਅਤੇ ਤਬਦੀਲੀਆਂ ਊਪਰ ਵੱਲ ਵਹਿੰਦੀਆਂ ਹਨ (child parent ਨੂੰ ਕੁਝ ਬਦਲਣ ਲਈ ਕਹਿੰਦਾ ਹੈ callback prop ਰਾਹੀਂ ਜਿਵੇਂ onChange)। ਇਹ ਇੱਕ-ਤਰਫਾ ਵਹਾਅ ਹੀ ਹੈ ਜੋ React ਐਪਸ ਨੂੰ ਅਨੁਮਾਨ ਲਗਾਉਣ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ।
props.x = 1) ਇੱਕ bug ਹੈ — React re-render ਨਹੀਂ ਕਰੇਗਾ ਅਤੇ ਤੁਮ parent ਦੀ ਮਾਲਕੀ ਤੋੜ ਦਿੱਤੀ ਹੈ। "prop ਨੂੰ ਬਦਲਣ" ਲਈ, ਉਸ callback ਨੂੰ ਕਾਲ ਕਰੋ ਜੋ parent ਨੇ ਤੁਹਾਨੂੰ ਦਿੱਤਾ ਹੈ ਤਾਂਕਿ parent ਆਪਣਾ ਆਪਣਾ state ਅਪਡੇਟ ਕਰੇ ਅਤੇ ਇੱਕ ਨਵਾਂ ਮੁੱਲ ਹੇਠਾਂ ਪਾਸ ਕਰੇ।