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

समस्या: बहुत अधिक स्थितियाँ === बहुत अधिक पुन: प्रस्तुतीकरण

आइए कल्पना करें कि हमारे पास एक घटक है जो उपयोगकर्ता के डेटा का प्रबंधन करता है। हम इन राज्यों को स्वतंत्र रूप से इस तरह घोषित कर सकते हैं:

const UserComponent = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [address, setAddress] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [occupation, setOccupation] = useState('');

  // Funções de atualização dos estados
  const updateName = (newName) => setName(newName);
  const updateAge = (newAge) => setAge(newAge);
  // e assim por diante...

  return (
    ...
  );
};

यहां हमारे पास 6 स्वतंत्र राज्य हैं, हर बार इनमें से एक राज्य को अद्यतन किया जाता है, संपूर्ण घटक को फिर से प्रस्तुत किया जाता है, अब कल्पना करें कि हमें 6 राज्यों को अद्यतन करने की आवश्यकता है... हां, हम प्रस्तुत करते हैं यह घटक 6 बार।

समाधान: उपयोगकर्ता जानकारी के संबंध में केवल 1 राज्य बनाएं

इस समस्या को कम करने का एक तरीका सभी राज्यों को एक ही वस्तु में समेकित करना है। अलग-अलग राज्य रखने के बजाय, हम सभी उपयोगकर्ता जानकारी को एक राज्य में रख सकते हैं, यह इस तरह दिखेगा:

const UserComponent = () => {
  const [user, setUser] = useState({
    name: '',
    age: 0,
    address: '',
    email: '',
    phone: '',
    occupation: ''
  });

  // Função para atualizar o estado do usuário
  const updateUser = (newData) => {
    setUser((prevState) => ({
      ...prevUser,
      ...newData,
    }));
  };

  return (
    ...
  );
};

अब, प्रत्येक राज्य के लिए एक फ़ंक्शन होने के बजाय, हमारे पास अपडेटयूज़र फ़ंक्शन है, जो केवल वांछित परिवर्तन प्राप्त करता है और स्प्रेड ऑपरेटर (...) का उपयोग करके उन्हें पिछले राज्य के साथ जोड़ता है। यह आपको राज्य के केवल एक हिस्से को अपडेट करने की अनुमति देता है, जबकि बाकी अपरिवर्तित रहता है।

यदि आप ऑब्जेक्ट के बारे में केवल 1 जानकारी बदलना चाहते हैं, तो यह करें:

setUser((prevState) => ({...prevState, age: 25}))

अंतर

जब हम अलग-अलग राज्यों का उपयोग करते हैं, तो प्रत्येक व्यक्तिगत राज्य परिवर्तन घटक के पुन: प्रस्तुतीकरण का कारण बनता है। जब हम सभी स्थितियों को एक ही ऑब्जेक्ट में समेकित करते हैं, तब भी हमारे पास एक ही री-रेंडर होता है, लेकिन यह केवल एक बार होता है, भले ही ऑब्जेक्ट के कई हिस्से बदल जाएं।

लाभ

- री-रेंडर्स में कमी: राज्यों को समेकित करके, हम कई अनावश्यक री-रेंडर्स से बचते हैं, प्रदर्शन में सुधार करते हैं।
- आसान रखरखाव: उपयोगकर्ता की जानकारी को एक ही स्थिति में प्रबंधित करना, कोड को सरल बनाना और इसे अधिक पठनीय बनाना आसान है।
- आंशिक रूप से नियंत्रित अपडेट: हम राज्य के केवल उन हिस्सों को बदल सकते हैं जिन्हें संशोधित करने की आवश्यकता है, बाकी को बदले बिना।

ओर वो! मुझे आशा है कि मैंने मदद की!!!
हालाँकि मैं अभी भी विकास कर रहा हूँ, लेकिन यहाँ मेरा पोर्टफोलियो है: https://lucaslima.vercel.app (मुझे आशा है कि जब आप इसे एक्सेस करेंगे, तो यह तैयार होगा हाहाहा)

सफलता! ?