इस लेख में, हम देखेंगे कि अपने ऐप्स में React.Context से कैसे छुटकारा पाएं और ऐसा करने के लिए प्रेरणा ढूंढें।

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

1. React.Context से क्यों बचें?

संदर्भ पठनीयता को ख़राब करता है, ऐप को उलझाता है और प्रतिबंधित करता है।

बस इस मूल उदाहरण पर एक नज़र डालें:

बहुत अधिक समझने योग्य और विश्वसनीय नहीं लगता, है ना?

संदर्भों का उपयोग करते समय यहां कुछ संभावित समस्याएं हैं:

1. जितने अधिक संदर्भों का उपयोग किया जाएगा, आपका ऐप उतना ही कम पढ़ने योग्य और नियंत्रणीय हो जाएगा;
2. कभी-कभी नेस्टेड संदर्भों को काम करने के लिए सही क्रम की आवश्यकता होती है, जिससे आपके ऐप को बनाए रखना मुश्किल हो जाता है;
3. ठीक से काम करते रहने के लिए परीक्षण वातावरण की स्थापना के दौरान कुछ संदर्भों का पुन: उपयोग किया जाना चाहिए;
4. आपको यह सुनिश्चित करना होगा कि घटक एक आवश्यक संदर्भ प्रदाता का बच्चा है।

मजेदार तथ्य: सुप्रसिद्ध "प्रॉमिस-हेल" एक जैसा दिखता है ?‍♂️

loadClients()
  .then((client) => {
    return populate(client)
      .then((clientPopulated) => {
        return commit(clientPopulated);
      });
  });

2. React.Context को कैसे बदलें?

इसके बजाय हुक बनाएं।

आइए उपरोक्त उदाहरण से ThemeContext को एक कस्टम उपयोगथीम हुक से बदलें:

import { useAppEvents } from 'use-app-events';

const useTheme = () => {
  const [theme, setTheme] = useState('dark');

  /** Set up communication between the instances of the hook. */
  const { notifyEventListeners, listenForEvents } = useAppEvents();

  listenForEvents('theme-update', (themeNext: string) => {
    setTheme(themeNext);
  });

  const updateTheme = (themeNext: string) => {
    setTheme(themeNext);

    notifyEventListeners('theme-update', themeNext);
  };

  return {
    theme,
    updateTheme,
  };
};

हमने यूज़-ऐप-इवेंट नामक एक एनपीएम पैकेज का उपयोग किया ताकि यूज़थीम हुक के सभी उदाहरणों को उनकी थीम स्थिति को सिंक्रनाइज़ करने के लिए संचार दिया जा सके। यह सुनिश्चित करता है कि जब ऐप में यूज़थीम को कई बार कॉल किया जाता है तो थीम का मान समान होगा।

इसके अलावा, यूज़-ऐप-इवेंट पैकेज के लिए धन्यवाद, थीम को ब्राउज़र टैब के बीच भी सिंक्रनाइज़ किया जाएगा।

इस बिंदु पर, थीमकॉन्टेक्स्ट की अब आवश्यकता नहीं है क्योंकि वर्तमान थीम प्राप्त करने और इसे अपडेट करने के लिए यूज़थीम हुक का उपयोग ऐप में कहीं भी किया जा सकता है:

const App = () => {
  const { theme, updateTheme } = useTheme();

  updateTheme('light');

  // Output: 
Current theme: light
  return 
Current theme: {theme}
;
}

दृष्टिकोण के फायदे क्या हैं:

1. बच्चों द्वारा इसका उपयोग करने से पहले पेड़ पर कहीं हुक स्थापित करने की आवश्यकता नहीं है (परीक्षण वातावरण सहित);
2. रेंडर संरचना साफ-सुथरी है, जिसका अर्थ है कि अब आपके संदर्भों से बनी कोई भ्रमित करने वाली तीर-आकार की संरचना नहीं है;
3. राज्य टैब के बीच सिंक्रनाइज़ है।

निष्कर्ष

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