બંને ડેટા ધરાવે છે જે કમ્પોનેન્ટ શું રેન્ડર કરે તેને અસર કરે છે, પરંતુ તેઓ ડેટાની માલિકી કોણ કરે છે અને તે બદલાઈ શકે છે કે કેમ તેમાં અલગ છે।
// `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 apps ને અનુમાન કરી શકાય તેવું બનાવે છે।
props.x = 1) એક ખામી છે — React પુનઃ-રેન્ડર કરશે નહીં અને તમે પેરેન્ટની માલિકી તોડી દીધી છે. "prop બદલવા" માટે, callback કહો જે પેરેન્ટે તમને આપ્યો હતો જેથી પેરેન્ટ તેના પોતાના state અને નવો મૂલ્ય આપે નીચે.