State भनेको कुनै पनी डेटा हो जो समयसँगै परिवर्तन हुन सक्छ र जसमा UI लाई रेन्डर गर्न निर्भर हुन्छ। जब स्टेट परिवर्तन हुन्छ, UI यसलाई प्रतिबिम्बित गर्न अपडेट हुन्छ। यो तपाईंको अनुप्रयोगको कुनै पनी समयमा "स्मृति" हो।
✓ A counter value, a form's input text, a toggle (on/off)
✓ Whether a modal is open, the active tab, loading/error flags
✓ The logged-in user, items in a cart, fetched API data
✓ The current theme (dark/light), selected filters
function Counter() {
const [count, setCount] = useState(0); // `count` is state
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times {/* the UI is a function of state */}
</button>
);
}
आधुनिक ढाँचाको मूल विचार: UI = f(state)। तपाईंले DOM लाई म्यानुअली अपडेट गरिरहनु पर्दैन; तपाईंले स्टेट परिवर्तन गरिरहनु हुन्छ, र ढाँचाले UI लाई मेल गरिरहन रि-रेन्डर गर्छ। बटन क्लिक गरिरहनु → count परिवर्तन हुन्छ → प्रदर्शित संख्या स्वचालित रूपले अपडेट हुन्छ।
State: changes over time, drives re-renders (count, user, isOpen)
Constants: never change (PI, config URLs) — not state
Derived: computed FROM state (fullName from firstName + lastName) — don't store separately
प्रत्येक चर स्टेट हैन — केवल डेटा जो परिवर्तन हुन्छ र जो रेन्डर गरिएको कुरालाई असर गर्छ। मान जो तपाईंले अवस्थित स्टेटबाट गणना गर्न सक्नु हुन्छ यसलाई अलग स्टेटको रूपमा भण्डार गरिनु पर्दैन (यो तिनीहरूलाई सिङ्क्रोनाइजेशन बाहिर जोखिममा राख्छ)।
Local/UI state → belongs to one component (input text, isOpen)
Global state → shared app-wide (user, theme, cart)
Server state → data fetched from an API (cached remote data)
URL state → in the address bar (filters, page number)
State लाई "डेटा जो परिवर्तन हुन्छ र UI लाई चलाउँछ" को रूपमा बुझ्न सबै फ्रन्टएन्ड विकासको आधार हो।
मानसिक मडेल UI = f(state) ले व्याख्या गर्छ कि कसरी React/Vue/Angular काम गर्छन् — तपाईंले स्टेट प्रबन्ध गरिरहनु हुन्छ, र दृश्य अनुसरण गर्छ।
कुन कुरा हो र हैन स्टेट (र व्युत्पन्न मानहरू डुप्लिकेट नगरिकन) भनी पहिचान गरिन सक्नु सुचारु ढङ्गले प्रबन्ध गर्ने पहिलो चरण हो; स्टेट प्रबन्धनमा सबै कुरा यस अवधारणामा आधारित छ।