React: हुक से ट्रिगर सस्पेंस

क्या आप किसी सुविधा का अनुरोध करना चाहते बग की रिपोर्ट करना चाहते हैं?

सवाल। यह #14563 से भी संबंधित हो सकता है।

हम एक हुक से रहस्य कैसे ट्रिगर करते हैं?

सवाल क्यों आया?

यह प्रश्न हमारे द्वारा react-i18next उपयोग के दौरान सामने आया। react-i18next एक हालिया अपडेट ने useTranslation -हुक प्रदान किया जो वर्तमान अनुवाद प्राप्त करने की अनुमति देता है और अभी तक लोड नहीं किए गए अनुवाद नामस्थान (थोड़े कोड विभाजन की तरह) की लोडिंग को भी ट्रिगर करेगा।

उस मामले को संभालने के लिए जहां अनुवाद अभी तक लोड नहीं हुए हैं, useTranslation -हुक Suspense को ट्रिगर करने का वादा करता है, जो वास्तव में वास्तव में साफ है क्योंकि यह मौजूदा प्रतिक्रिया सुविधाओं के साथ सफाई से एकीकृत करता है!

हालांकि, यदि आप useTranslation -हुक को कॉल करने के बाद अधिक हुक का उपयोग कर रहे हैं, तो इन अन्य हुकों को प्रदान नहीं किया जाएगा यदि useTranslation वादा फेंकता है। एक बार जब अनुवाद लोड हो जाते हैं तो हुक नहीं फेंकेगा और प्रतिक्रिया आपको एक बड़ी लाल चेतावनी देगी कि हुक की मात्रा बदल गई है।

उदाहरण

const Component = () => {
  const [t] = useTranslation('translationnamespace');
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount(count + 1)}>
      {t('The count is:')} {count}
    </div>
  );
};

अगर translationnamespace अभी तक लोड नहीं हुआ है, तो useTranslation फेंक देगा, जिससे useState को रेंडर नहीं किया जा सकेगा। एक बार translationnamespace लोड हो जाने के बाद, useTranslation अब और नहीं फेंकेगा, जिसके कारण चेतावनी के कारण useState का प्रतिपादन किया जाता है।

सामान्य मामला

तो यह प्रश्न केवल प्रतिक्रिया-i18next पर लागू नहीं होता है, बल्कि इसके बजाय उन सभी हुक पर लागू होता है जो रहस्य को ट्रिगर करना चाहते हैं। हम ऐसा करने के बारे में कैसे जाएंगे, और यह वर्तमान "हुक के नियम" के साथ कैसे एकीकृत होगा जो बताता है कि हुक को सशर्त रूप से प्रस्तुत नहीं किया जाना चाहिए?