useState का परिचय
useState एक magic box है जो एक component को एक value remember करने और उस value के change होने पर खुद को redraw करने देता है।
In this page:
Syntax
import { useState } from "react";
const [state, setState] = useState(initialValue);
setState(newValue); // updates state and re-rendersuseState से State बनाना
useState(initialValue) दो items वाला एक array return करता है: current state value, और इसे update करने के लिए एक function। Convention से, आप इन्हें array destructuring उपयोग करके दो variables में destructure करते हैं, typically value और setValue नाम दिए जाते हैं।
Note:
Setter function को state variable के नाम के बाद
set नाम दें, जैसे count/setCount, consistency के लिए।Warning:
useState को component के top level पर call किया जाना चाहिए, कभी एक if statement, loop, या nested function के अंदर नहीं।
उदाहरण: Creating State with useState
<!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);
return <p>Count: {count}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);
</script>
</body>
</html>एक Re-render Trigger करने के लिए State Update करना
Setter function call करना state value update करता है AND React को नई value के साथ component को re-render करने के लिए बताता है। यही है जो UI को user actions जैसे clicks के response में actually change होने देता है।
Note:
State change करने के लिए हमेशा setter function उपयोग करें -- कभी state variable को directly assign न करें।
Warning:
Directly assign करना (जैसे
count = count + 1) एक re-render trigger नहीं करता और UI update नहीं होगा।उदाहरण: Updating State to Trigger a Re-render
<!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);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);
</script>
</body>
</html>हर Component का अपना State होता है
जब आप एक ही component को कई बार use करते हैं, हर instance को अपना independent state मिलता है -- एक को change करना दूसरों को affect नहीं करता। ऐसा है क्योंकि useState हर individual rendered component instance से tied है, globally shared नहीं।
Note:
यह independence वही है जो components को reusable बनाता है -- आप same stateful component को कहीं भी drop कर सकते हैं बिना इसके दूसरे copies में interfere किए।
Warning:
Beginners कभी-कभी expect करते हैं कि state default रूप से एक component के सभी instances में shared होगा -- यह नहीं है, जब तक आप इसे explicitly lift up न करें।
उदाहरण: Each Component Has Its Own State
<!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);
return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}
function App() {
return <div><Counter /><Counter /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- component के top level के बजाय एक loop, condition, या nested function के अंदर useState call करना।
- setter function call करने के बजाय directly state variable को mutate करना।
- same function call के अंदर setter call करने के बाद immediately state variable के update हो जाने की उम्मीद करना।
चैप्टर सारांश
- useState एक Hook है जो एक function component में state जोड़ता है।
- यह एक pair return करता है: current value और इसे update करने के लिए एक function।
- Setter call करना नई value के साथ एक re-render trigger करता है।
- State updates same function call के अंदर synchronously apply नहीं होते।
ब्राउज़र सपोर्ट
React 16.8 से available, जब Hooks introduce हुए थे।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: