जब आप रिएक्ट के साथ काम कर रहे हों और आपके पास एक ही घटक के कई उदाहरण हों, तो स्थिति को प्रबंधित करना मुश्किल हो सकता है। इस पर निर्भर करते हुए कि आपके घटकों को कैसे इंटरैक्ट करना है, आप स्थिति को अलग तरीके से संभालना चाहेंगे। यहाँ मैंने जो पाया है वह अच्छा काम करता है।

स्वतंत्र उदाहरण: राज्य को घटक के अंदर रखें

यदि आपके घटकों को एक-दूसरे से बात करने की आवश्यकता नहीं है, तो उनकी स्थिति को घटक के अंदर रखना सबसे अच्छा है। इस तरह, प्रत्येक उदाहरण की अपनी स्थिति होती है, और एक में परिवर्तन दूसरे को प्रभावित नहीं करता है।

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
    
  );
}

// Usage
 // Instance 1
 // Instance 2

यहां, प्रत्येक काउंटर घटक अपनी गणना का ट्रैक रखता है। इसलिए, यदि आप एक काउंटर में बटन पर क्लिक करते हैं, तो इससे दूसरे में गिनती नहीं बदलती।

आश्रित उदाहरण: मूल घटक में राज्य का प्रबंधन करें

लेकिन अगर घटकों को कुछ स्थिति साझा करने या समन्वित तरीके से काम करने की आवश्यकता है, तो राज्य को मूल घटक तक ले जाना बेहतर है। अभिभावक साझा स्थिति को प्रबंधित कर सकते हैं और इसे प्रॉप्स के रूप में पास कर सकते हैं। यह सुनिश्चित करता है कि सभी उदाहरण समन्वयित रहें और एक साथ सुचारू रूप से काम करें।

function Parent() {
  const [sharedCount, setSharedCount] = useState(0);

  return (
    

      
Total Count: {sharedCount}
      
  );
}

function Counter({ count, setCount }) {
  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
    
  );
}

यह दृष्टिकोण काम करता है क्योंकि जब राज्य मूल घटक में होता है, तो उस राज्य में कोई भी अपडेट सभी उदाहरणों के पुन: प्रस्तुतीकरण को ट्रिगर करता है, जिससे यह सुनिश्चित होता है कि वे सभी नवीनतम यूआई प्रदर्शित करते हैं। यदि राज्य को प्रत्येक उदाहरण में अलग से रखा जाता है, तो केवल राज्य परिवर्तन वाला उदाहरण फिर से प्रस्तुत किया जाएगा, जिससे सभी उदाहरणों में असंगत यूआई हो जाएगा।

मेरे प्रोजेक्ट से उदाहरण

एक अकॉर्डियन घटक बनाते समय मुझे इसका पता चला। यहां मेरे अपने काम से दो उदाहरण हैं:

• स्वतंत्र अकॉर्डियन उदाहरण: उदाहरण। इस सेटअप में, प्रत्येक अकॉर्डियन इंस्टेंस स्वतंत्र रूप से काम करता है।

• निर्भर अकॉर्डियन इंस्टेंसेस: उदाहरण। इस संस्करण में, सभी अकॉर्डियन इंस्टेंस एक-दूसरे पर निर्भर होते हैं और सिंक में रहते हैं।

त्वरित पुनर्कथन

• यदि घटक अलग-अलग काम करते हैं, तो प्रत्येक घटक के अंदर स्थिति रखें।

• यदि उन्हें राज्य साझा करने या समन्वित तरीके से एक साथ काम करने की आवश्यकता है, तो मूल में राज्य का प्रबंधन करें।

इन अकॉर्डियन उदाहरणों को बनाते समय इस दृष्टिकोण ने मेरे लिए एक बड़ा बदलाव लाया। आशा है यह आपकी भी मदद करेगा!