સ્ટેટ ઉપર ઉઠાવવાનો અર્થ શું છે?

Question

Accepted Answer

**સ્ટેટ ઉપર ઉઠાવવું** એનો અર્થ છે કે સ્ટેટને બાળ કમ્પોનેન્ટથી **સામાન્ય પેરેન્ટ** તરફ ખસેડવું જેથી બહુવિધ બાળકો એક જ ડેટા શેર કરી શકે અને સમન્વયમાં રહે. તે વાસ્તવમાં માત્ર ઉકેલ છે જ્યારે ભાઈ-બહેન કમ્પોનેન્ટ્સને તાલમેલ કરવાની જરૂર હોય. ## સમસ્યા: ભાઈ-બહેનને શેરીંગ ડેટાની જરૂર છે ```jsx // ❌ each child has its OWN state — they can't sync function TempInput() { const [temp, setTemp] = useState(0); ... } // Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value ``` જો બે ભાઈ-બહેન કમ્પોનેન્ટ્સ પાસે તેમનો પોતાનો સંબંધિત સ્ટેટનો કોપી હોય, તો તેમને સમાન રાખવાનો કોઈ રસ્તો નથી — એક બીજાને બદલવું બીજા પર અસર નથી કરે. ## ઉકેલ: સ્ટેટને પેરેન્ટ તરફ ઉપર ઉઠાવો ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state LIFTED to the parent return ( <> {/* pass state DOWN as a prop, and a setter to update it */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` શેર કરેલ સ્ટેટ હવે પેરેન્ટમાં (`Calculator`) રહે છે. તે મૂલ્યને *નીચે* prop તરીકે અને સેટર તરીકે પાસ કરે છે જેથી બાળકો પરિવર્તનો માટે વિનંતી કરી શકે (*ઉપર*). હવે બંને ઇનપુટ એક જ સ્ત્રોતને પ્રતિબિંબિત કરે છે — એક ને સંપાદિત કરવું બંનેને અપડેટ કરે છે. ## પેટર્ન ```text 1. Find the closest COMMON ancestor of the components that need to share 2. Move the state UP into that ancestor 3. Pass the value DOWN as props 4. Pass a callback DOWN so children can request updates (data up via events) ``` આ જ "ડેટા નીચે, ઇવેન્ટ્સ ઉપર" પ્રવાહ છે, શેર કરેલ સ્ટેટ બનાવવા માટે લાગુ કર્યું. ## જ્યારે ઉપર ઉઠાવવું ખૂબ વધી જાય ```text Lifting too high (state ends up far from where it's used) → prop drilling. At that point, prefer Context or a state library instead of lifting further. ``` ## શા માટે તે મહત્ત્વપૂર્ણ છે સ્ટેટ ઉપર ઉઠાવવું એ મૂળભૂત તકનીક છે **ભાઈ-બહેન/સંબંધિત કમ્પોનેન્ટ્સ વચ્ચે સ્ટેટ શેર કરવા** માટે કમ્પોનેન્ટ-આધારિત ફ્રેમવર્કમાં — તે એક સામાન્ય પેરેન્ટમાં સત્યનો એક જ સ્ત્રોત રાખે છે જેથી બાળકો સમાન રહે. તે સાધારણતઃ *પ્રથમ* સાધન છે જેને Context અથવા સ્ટોર ઉમેરતા પહેલાં પકડવાનું હોય. જ્યારે ઉપર ઉઠાવવું છે તે ઓળખવું (ભાઈ-બહેનને તાલમેલ કરવાની જરૂર છે) — અને જ્યારે ઉપર ઉઠાવવું ખૂબ આગળ ગયું છે (prop drilling નું કારણ બને છે, તેથી તે Context/સ્ટોર માટે સમય છે) — કમ્પોનેન્ટ સ્ટેટ સારી રીતે સંરચના કરવા માટે મુખ્ય છે.