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>
);
}
ਆਧੁਨਿਕ frameworks ਦਾ ਮੂਲ ਵਿਚਾਰ: UI = f(state)। ਤੁਸੀਂ DOM ਨੂੰ ਹੱਥੀਂ ਅਪਡੇਟ ਨਹੀਂ ਕਰਦੇ; ਤੁਸੀਂ state ਨੂੰ ਬਦਲਦੇ ਹੋ, ਅਤੇ framework 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
ਹਰ ਇੱਕ variable state ਨਹੀਂ ਹੈ — ਸਿਰਫ ਉਹ ਡੇਟਾ ਜੋ ਬਦਲਦਾ ਹੈ ਅਤੇ ਜੋ ਰੈਂਡਰ ਕੀਤਾ ਜਾਣ ਵਾਲਾ ਕੁਝ ਪ੍ਰਭਾਵਤ ਕਰਦਾ ਹੈ। ਮੁੱਲ ਜੋ ਤੁਸੀਂ ਮੌਜੂਦਾ state ਤੋਂ calculate ਕਰ ਸਕਦੇ ਹੋ ਉਹ ਨੂੰ ਵੱਖ state ਦੇ ਤੌਰ ਤੇ ਸਟੋਰ ਨਹੀਂ ਕਰਨਾ ਚਾਹੀਦਾ (ਇਸ ਨਾਲ ਉਹ sync ਤੋਂ ਬਾਹਰ ਹੋ ਸਕਦੇ ਹਨ)।
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 development ਦੀ ਬੁਨਿਆਦ ਹੈ।
ਮਾਨਸਿਕ ਮਾਡਲ UI = f(state) ਇਹ ਸਮਝਾਉਂਦਾ ਹੈ ਕਿ React/Vue/Angular ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ — ਤੁਸੀਂ state ਦਾ ਪ੍ਰਬੰਧ ਕਰਦੇ ਹੋ, ਅਤੇ ਵਿਊ ਅਨੁਸਾਰ ਚਲਦਾ ਹੈ।
ਯਕੀਨਨ ਕਰਨਾ ਕਿ ਕੀ ਅਤੇ ਕੀ ਨਹੀਂ state ਹੈ (ਅਤੇ derivable values ਨੂੰ duplicate ਨਾ ਕਰਨਾ) ਇਸ ਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਪ੍ਰਬੰਧਤ ਕਰਨ ਦੀ ਪਹਿਲੀ ਸਿੱਧੀ ਹੈ; state management ਵਿੱਚ ਸਭ ਕੁਝ ਇਸ ਸੰਕਲਪ 'ਤੇ ਬਣਾਇਆ ਗਿਆ ਹੈ।