Global और Local State में अंतर
In this page:
Local State क्या count होता है
Local state पूरी तरह एक component के अंदर रहता है, useState या useReducer से बनाया जाता है, और उस component के unmount होने पर गायब हो जाता है। एक single input का current text, या एक dropdown open है या नहीं, classic examples हैं — उस component के बाहर किसी को जानने या care करने की ज़रूरत नहीं।
उदाहरण: What Counts as Local 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 SearchBox() {
const [text, setText] = React.useState("");
return <input value={text} onChange={e => setText(e.target.value)} />;
}
ReactDOM.createRoot(document.getElementById('root')).render(<SearchBox />);
</script>
</body>
</html>Global जाने से पहले State को Lift Up करना
जब दो sibling components को same value share और sync में रहने की ज़रूरत होती है, तो state को पूरी तरह global जाने की ज़रूरत नहीं — इसे उनके closest common parent component तक move करना (और props के रूप में नीचे pass करना) अक्सर काफी है।
इसे 'state lifting up' कहा जाता है।
उदाहरण: Lifting State Up Before Going Global
<!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 Parent() {
const [value, setValue] = React.useState("");
return (
<div>
<input value={value} onChange={e => setValue(e.target.value)} />
<p>Sibling sees: {value}</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Parent />);
</script>
</body>
</html>State को असल में Global होने की कब ज़रूरत है
State global management के लिए एक अच्छा candidate बन जाता है जब इसकी ज़रूरत tree की scattered unrelated branches में कई components को होती है — जैसे current logged-in user, app theme, या एक shopping cart जो product page और checkout page दोनों से accessible हो जो component hierarchy में एक-दूसरे से दूर हैं।
उदाहरण: When State Truly Needs to Be Global
<!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">
// Global: current user needed by Header, Sidebar, and Checkout,
// which don't share a close common parent.
const UserContext = React.createContext(null);
function Header() {
const user = React.useContext(UserContext);
return <p>Logged in as: {user || "Guest"}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(
<UserContext.Provider value="Asha"><Header /></UserContext.Provider>
);
</script>
</body>
</html>- हर चीज़ को 'to be safe' global बनाना, जो components को isolation में reuse और reason about करना harder बनाता है।
- हर चीज़ को local बनाना जब दो sibling components को असल में same synchronized value चाहिए।
- यह न पहचानना कि state organically कई जगहों पर ज़रूरी हो गया है और इसे lift या shared state में move करना चाहिए।
- Local state useState/useReducer के through एक component के अंदर रहता है और इसके बाहर visible नहीं होता।
- Global state app में कहीं से भी accessible होता है, Context, Redux, Zustand, या similar tools के through।
- State lift up करना (इसे एक shared parent तक move करना) अक्सर true global state की ओर जाने से पहले काफी होता है।
- सही default है state को जितना हो सके local रखना, इसका scope सिर्फ ज़रूरत पड़ने पर widen करना।
कोई React-version restriction नहीं — यह एक architectural pattern है, कोई specific API नहीं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: