State को सही तरीके से Update करना
In this page:
const [state, setState] = useState(initialValue);
// wrong: state = newValue;
setState(newValue); // new value appears on the next renderState को कभी Directly Mutate न करें
React partly यह check करके decide करता है कि re-render करना है या नहीं कि state value change हुई या नहीं। अगर आप existing value को जगह पर mutate करें एक नई बनाने के बजाय, React शायद change detect न करे और UI update न हो, भले ही underlying data actually change हुई हो।
state.push(newItem) के बाद setState(state) जैसा कुछ अक्सर re-render करने में fail होता है क्योंकि array reference change नहीं हुई।उदाहरण: Never Mutate State Directly
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Toggle() {
const [isOn, setIsOn] = React.useState(false);
return (
<button onClick={() => setIsOn(!isOn)}>
{isOn ? "ON" : "OFF"}
</button>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Toggle />);
</script>
</body>
</html>State Updates Instant नहीं होते
एक state setter call करना next render के लिए एक update schedule करता है -- यह currently-running function के अंदर immediately variable की value change नहीं करता। अगर आप setter call करने के ठीक बाद state variable log करें, आप अब भी old value देखेंगे।
setCount(count + 1); console.log(count); जैसा code OLD count log करेगा, नया नहीं -- यह कई beginners को surprise करता है।उदाहरण: State Updates Are Not Instant
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Demo() {
const [count, setCount] = React.useState(0);
function handleClick() {
setCount(count + 1);
// count here is still the OLD value until the next render
}
return <button onClick={handleClick}>Count: {count}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Demo />);
</script>
</body>
</html>State Renders के बीच Persist करता है
एक normal local variable के विपरीत जो हर बार function चलने पर reset होता है, useState से declared state React द्वारा same component instance के re-renders भर में preserve किया जाता है।
यही exactly है जो एक component को समय के साथ एक counter value जैसी चीज़ें remember करने देता है।
let variable हर render पर अपनी initial value पर reset हो जाता है -- सिर्फ useState (या similar Hooks) actually persist करता है।उदाहरण: State Persists Between Renders
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Counter() {
const [count, setCount] = React.useState(0);
// A plain variable here would reset to 0 every render; state does not.
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);
</script>
</body>
</html>- state में एक object या array को एक नई copy बनाने के बजाय directly mutate करना।
- same function में इसका setter call करने के ठीक बाद immediately state variable की value पर rely करना।
- यह भूल जाना कि previous render से state updates वही हैं जो आप next render होने तक देखते हैं।
- State को हमेशा इसके setter function के through update किया जाना चाहिए, कभी directly mutate नहीं।
- React re-render करना है या नहीं decide करने के लिए old और new state compare करता है।
- State updates next render पर effect लेते हैं, instantly नहीं।
- State को immutable मानना React apps में subtle bugs रोकता है।
कोई browser-specific restrictions नहीं -- React 16.8 से useState पर applies होता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: