State என்பது காலத்திற்கு ஏற்ப மாறக்கூடிய எந்தவொரு தரவு மற்றும் UI ஐ வரைய இதன் மீது சார்ந்திருக்கிறது. State மாறும்போது, 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 ஐ கைமுறையாக புதுப்பிக்க வேண்டியதில்லை; state ஐ மாற்றி, கাঠামো 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
ஒவ்வொரு மாறும் state அல்ல — state என்பது மாறும் மற்றும் என்ன வரைய வேண்டும் என்பதை பாதிக்கிறது அத்தகைய தரவு மட்டுமே. உள்ள state இ से निकाले गए मान विभिन्न state के रूप में संग्रहीत नहीं किए जाने चाहिए (जोखिम है कि वे सिंक्रनाइज़ से बाहर हो जाएंगे)।
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 ஐ இயக்கும் தரவு" என புரிந்துகொள்வது frontend உ વિકાસનો आधार है।
মানসিক மডেल UI = f(state) ব्याখ्या करता है कि React/Vue/Angular कैसे काम करते हैं — आप state प्रबंधित करते हैं, और दृश्य इसका पालन करता है।
यह पहचानना कि क्या है और क्या नहीं है state (और व्युत्पन्न मूल्यों को डुप्लिकेट न करना) इसे अच्छी तरह से प्रबंधित करने की ओर पहला कदम है; state management में सब कुछ इस अवधारणा पर बनाया गया है।