સ્થાનિક સ્થિતિ એક જ ઘટક (અથવા નાના સબટ્રીમાં) ની છે અને બીજે કાંઈ જરૂર નથી. વૈશ્વિક સ્થિતિ સમગ્ર એપ્લિકેશનમાં ઘણા, ઘણીવાર દૂરવર્તી, ઘટકો વચ્ચે શેર કરવામાં આવે છે.
સ્થાનિક સ્થિતિ — એક ઘટક માટે પરિમાણિત
() {
[query, setQuery] = ();
;
}
સ્થાનિક સ્થિતિ એક જ ઘટક (અથવા નાના સબટ્રીમાં) ની છે અને બીજે કાંઈ જરૂર નથી. વૈશ્વિક સ્થિતિ સમગ્ર એપ્લિકેશનમાં ઘણા, ઘણીવાર દૂરવર્તી, ઘટકો વચ્ચે શેર કરવામાં આવે છે.
() {
[query, setQuery] = ();
;
}
સ્થાનિક સ્થિતિ ઘટક (useState, ref, data()) ની અંદર રહે છે. ઉદાહરણો: ઇનપુટ મૂલ્યો, ડ્રોપડાઉન ખુલ્લું છે કે કેમ, હોવર સ્થિતિ, ફોર્મનું ડ્રાફ્ટ. અન્ય કોઈ ઘટક તેની પરવાહ કરતું નથી.
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
વૈશ્વિક સ્થિતિ એવો ડેટા છે જે ઘણાં સંબંધહીન ઘટકોએ સતત વાંચવો અથવા અપડેટ કરવો જોઈએ: પુષ્ટિ કરાયેલ વપરાશકર્તા, થીમ, શોપિંગ કાર્ટ, એપ્લિકેશન-વ્યાપી સૂચનાઓ. તે Context, સ્ટોર (Redux/Zustand/Pinia) અથવા સમાન રીતે રહે છે.
Ask: "How many components need this, and how far apart are they?"
One component (or parent+child) → LOCAL state
Many unrelated components / whole app → GLOBAL state
// ❌ putting a single form's input in global state — unnecessary complexity
globalStore.setFormInput(value);
// ✅ keep it local — only this form uses it
const [value, setValue] = useState("");
સૌ કંઈને વૈશ્વિક બનાવવું બોઈલરપ્લેટ ઉમેરે છે, ઘટકોને જોડે છે, અને કામગીરીને નુકસાન પહોંચાડી શકે છે (વધુ પુનઃ-રેન્ડર). શ્રેષ્ઠ અભ્યાસ છે સ્થિતિ શક્ય તેટલી સ્થાનિક રાખો, અને તે વૈશ્વિક સ્તરે ફક્ત ત્યારે જ વધારો જ્યારે શેર કરવું ખરેખર જરૂરી છે.
સ્થાનિક વિ વૈશ્વિક પસંદ કરવું એક સૌથી મહત્વપૂર્ણ સ્થિતિ નિર્ણય છે.
સ્થિતિ સ્થાનિક રાખવી ઘટકોને સરળ, સ્વ-સમાવિષ્ટ અને કર્મક્ષમ બનાવે છે; વૈશ્વિક સ્થિતિ માટે ફક્ત ત્યારે જ પહોંચવું જ્યારે ડેટા ખરેખર શેર કરવામાં આવે છે તે બિનજરૂરી જટિલતાને અટકાવે છે.
વારંવાર હોવાયેલ પેટર્ન — "માત્ર કોઈ કેસમાં" એક વૈશ્વિક સ્ટોરમાં બધું મૂકવું — સોજવું અને કડક-જોડાયેલ એપ્સ તરફ દોરી જાય છે.
નિર્દેશક નિયમ: ડિફૉલ્ટ દ્વારા સ્થાનીયકરણ કરો, શેર કરવો માગણી સમય માત્ર વૈશ્વિક.