सही State Management Solution चुनना
In this page:
Local State: useState और useReducer
अगर एक piece of state सिर्फ एक component (या वह component और props के through इसके direct children) उपयोग करता है, तो plain useState या useReducer almost हमेशा सही, simplest choice है।
यहां एक global state library की ओर जाना बिना किसी real benefit के complexity जोड़ता है।
उदाहरण: Local State: useState and useReducer
<!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 App() {
const [isOpen, setIsOpen] = React.useState(false);
return <button onClick={() => setIsOpen(!isOpen)}>{isOpen ? "Close" : "Open"} Menu</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Shared State: Context, Zustand, या Redux
जब state को tree की अलग, unrelated branches में components द्वारा पढ़ना या update करना हो, तो आपको local state से आगे कुछ चाहिए। Context API React में built-in है और moderate cases के लिए fine है; Zustand/Jotai एक lighter-weight external option देते हैं; Redux सबसे ज़्यादा structure और tooling देता है, बड़े scale पर valuable।
उदाहरण: Shared State: Context, Zustand, or Redux
<!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">
const ThemeContext = React.createContext("light");
function ThemeLabel() {
const theme = React.useContext(ThemeContext);
return <p>Shared via Context (built-in, no install): {theme}</p>;
}
function App() {
return <ThemeContext.Provider value="dark"><ThemeLabel /></ThemeContext.Provider>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>एक Practical Decision Checklist
Practice में: क्या सिर्फ एक component (या इसके direct children) को यह चाहिए? useState उपयोग करें। क्या tree में कुछ components को यह चाहिए, बिना constant rapid changes के?
Context fine है। क्या एक बड़े app को complex update logic, strong DevTools, और team-wide conventions के साथ यह चाहिए?
Redux Toolkit consider करें। बीच में कुछ minimal setup के साथ चाहिए? Zustand try करें।
- एक app के लिए इनमें से कई साथ उपयोग करना पूरी तरह normal है:
- widgets के लिए local useState
- theme के लिए Context
- core business data के लिए Redux।
उदाहरण: A Practical Decision Checklist
<!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">
// A real app often mixes approaches:
// - useState: form input, modal open/closed
// - Context: theme, current logged-in user
// - Redux/Zustand: shopping cart, notifications, complex shared business data
function Example() {
const [open, setOpen] = React.useState(false); // local
return <p>{open ? "Open" : "Closed"}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Example />);
</script>
</body>
</html>- हर project पर default रूप से Redux की ओर जाना, actual complexity चाहे जो भी हो।
- बहुत frequently-changing state (जैसे mouse position) के लिए Context उपयोग करना, जो performance issues का कारण बन सकता है क्योंकि हर change पर हर consumer re-render होता है।
- App बढ़ने के साथ choice को फिर से कभी न visit करना — एक tool जो शुरुआत में fine था वह बाद में bottleneck बन सकता है।
- एक component या एक छोटे group के लिए local state के लिए useState/useReducer काफी हैं।
- Context API बिना frequent, rapid updates के moderate number of components में shared state के लिए suit करता है।
- Redux (या Redux Toolkit) complex, frequently-changing, widely-shared state वाले बड़े apps और strong tooling/conventions की ज़रूरत के लिए suit करता है।
- Zustand/Jotai/Recoil shared state के लिए Redux के lighter-weight alternatives देते हैं, कुछ structure को simplicity से trade करते हुए।
Comparison खुद के लिए कोई React-version restriction नहीं — हर tool की अपनी npm package requirements देखें।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: