state को ऊपर उठाना और डेटा साझा करना

हर state के टुकड़े को निकटतम साझा पूर्वज में रखें ताकि कई कंपोनेंट के बीच बिना डुप्लिकेट किए डेटा साझा हो सके।

7 मिनट · 3 प्रश्न

दो भाई कंपोनेंट को एक ही डेटा दिखाना है: उदाहरण के लिए, एक सर्च फ़ील्ड और वह सूची जिसे यह फ़िल्टर करती है। हर एक में स्थानीय state काम नहीं कर सकती, क्योंकि वे एक-दूसरे को नहीं देख सकते। समाधान है state को उनके निकटतम साझा पूर्वज में ऊपर उठाना: पैरेंट डेटा का मालिक होता है और उसे props के माध्यम से नीचे लौटाता है।

import { useState } from "react";

function ProductPage({ products }) {
  const [query, setQuery] = useState("");

  return (
    <>
      <SearchBar query={query} onChange={setQuery} />
      <ProductList products={products} query={query} />
    </>
  );
}

तब बच्चे नियंत्रित कंपोनेंट बन जाते हैं: वे मान केवल-पढ़ने योग्य रूप में प्राप्त करते हैं और, इसे बदलने के लिए, पैरेंट द्वारा प्रदान किए गए कॉलबैक फ़ंक्शन को कॉल करते हैं। डेटा props के माध्यम से नीचे बहता है, बदलाव के अनुरोध फ़ंक्शन के माध्यम से ऊपर बहते हैं। यह एकतरफ़ा प्रवाह एप्लिकेशन के व्यवहार को समझना आसान बनाता है।

function SearchBar({ query, onChange }) {
  return (
    <input
      value={query}
      onChange={(e) => onChange(e.target.value)}
      placeholder="Search for a product"
    />
  );
}

function ProductList({ products, query }) {
  const visible = products.filter((p) =>
    p.name.toLowerCase().includes(query.toLowerCase())
  );
  return (
    <ul>
      {visible.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

हर डेटा के टुकड़े का सत्य का एकमात्र स्रोत होना चाहिए। यदि दो कंपोनेंट प्रत्येक एक ही state की अपनी-अपनी प्रति संग्रहीत करते हैं, तो प्रतियाँ अंततः अलग हो जाएँगी: एक अपडेट हो जाती है, दूसरी नहीं, और इंटरफ़ेस असंगत हो जाता है। state को ऊपर उठाना उस जोखिम को हटा देता है। जब डेटा को कई स्तरों को पार करना पड़ता है, तो कंपोज़िशन (अगला पाठ) और फिर context props पास करने को हल्का करते हैं।

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. उस state को कहाँ रखना चाहिए जिसकी दो भाई कंपोनेंट को ज़रूरत है?
   • दोनों में से पहले भाई में, जो इसे दूसरे को पास करता है
   • उनके निकटतम साझा पूर्वज में
   • React के बाहर घोषित एक ग्लोबल वेरिएबल में
   • दोनों भाइयों में से प्रत्येक में, हाथ से सिंक्रनाइज़ करके
2. एक चाइल्ड कंपोनेंट अपने पैरेंट के स्वामित्व वाली state को कैसे बदल सकता है?
   • प्राप्त prop को सीधे बदलकर
   • पैरेंट द्वारा prop के रूप में पास किए गए कॉलबैक फ़ंक्शन को कॉल करके
   • पैरेंट के समान आरंभिक मान के साथ useState का उपयोग करके
3. एक ही डेटा को दो अलग-अलग state के टुकड़ों में संग्रहीत करने से क्यों बचें?
   • यह बहुत अधिक मेमोरी का उपयोग करता है
   • React समान आरंभिक मान वाले दो useState कॉल पर रोक लगाता है
   • दोनों प्रतियाँ अंततः सिंक से बाहर हो जाती हैं और इंटरफ़ेस असंगत हो जाता है