State को ऊपर Lift करना
State lifting up का मतलब है एक shared secret को दो kids से उनके parent तक move करना, ताकि दोनों kids इसे जान और साथ में update कर सकें।
In this page:
Syntax
function Parent() {
const [state, setState] = useState(initialValue);
return (
<>
<ChildA value={state} />
<ChildB onChange={setState} />
</>
);
}Problem: Siblings को Shared Data चाहिए
जब दो sibling components को दोनों को same piece of state का access चाहिए, हर एक में separate copies रखना उन्हें out of sync होने का कारण बनता है -- एक को update करना दूसरे को affect नहीं करेगा।
React में sibling components के एक-दूसरे से directly बात करने का कोई built-in तरीका नहीं है।
Note:
अगर आप notice करें कि दो components को exact same value चाहिए, यह state को उनके shared parent तक lift करने का signal है।
Warning:
Siblings भर में state duplicate करना एक common beginner mistake है जो confusing, inconsistent UI bugs की ओर ले जाता है।
उदाहरण: The Problem: Siblings Need Shared Data
<!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 TemperatureDisplay({ celsius }) {
return <p>{celsius}°C is {(celsius * 9/5 + 32).toFixed(1)}°F</p>;
}
function App() {
const [celsius] = React.useState(20);
return <TemperatureDisplay celsius={celsius} />;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>State को Common Parent में Move करना
Sync problem fix करने के लिए, state को (lifted) up किया जाता है closest component तक जो हर उस चीज़ का ancestor है जिसे इसकी ज़रूरत है। वह parent फिर current value को एक prop के रूप में हर child को pass करता है जो इसे display या use करता है।
Note:
Parent single source of truth बन जाता है -- children सिर्फ value receive और display करते हैं, वे अपनी own separate copy नहीं रखते।
Warning:
State lift up करने के बाद, child components से अब redundant हो गया local state remove करना याद रखें।
उदाहरण: Moving State to the Common Parent
<!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 Display({ value }) { return <p>Current: {value}</p>; }
function App() {
const [value, setValue] = React.useState(0);
return (
<div>
<Display value={value} />
<button onClick={() => setValue(value + 1)}>Increase</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Updater को भी Pass करना
अक्सर एक child को shared state change करनी होती है, सिर्फ इसे display नहीं करना होता। Parent अपना setter function एक prop के रूप में pass करता है, ताकि child इसे call कर सके -- parent को state का single owner रखते हुए भी children को updates trigger करने की allow करते हुए।
Note:
Updater function के prop को कुछ clear नाम दें, जैसे
onIncrease, directly setValue expose करने के बजाय।Warning:
Raw
setValue function को नीचे pass करना काम करता है, लेकिन इसे clearly एक event-like prop (जैसे onChange) के रूप में नाम देना component के API को समझना आसान बनाता है।उदाहरण: Passing the Updater Down Too
<!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 IncreaseButton({ onIncrease }) {
return <button onClick={onIncrease}>+1</button>;
}
function Display({ value }) { return <p>Value: {value}</p>; }
function App() {
const [value, setValue] = React.useState(0);
return (
<div>
<Display value={value} />
<IncreaseButton onIncrease={() => setValue(value + 1)} />
</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. #}
आम गलतियां
- same piece of data को दो sibling components के separate state में duplicated रखना इसे उनके shared parent तक lift करने के बजाय।
- state lift up करने के बाद value AND updater function दोनों को prop के रूप में pass करना भूल जाना।
- state को ज़रूरत से ज़्यादा ऊंचा lift करना, पूरे app के top तक, जब एक closer common parent काम कर जाता।
चैप्टर सारांश
- जब दो components को same data चाहिए, वह data उनके closest common parent में रहना चाहिए।
- Parent value को एक prop के रूप में नीचे pass करता है, और इसे update करने के लिए एक function दूसरे prop के रूप में।
- इसे 'lifting state up' कहा जाता है और यह एक core React data-flow pattern है।
- यह sibling components में same data की duplicated, out-of-sync copies से बचाता है।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- useState और props पर बना एक data-flow pattern।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: