मैं useMyData हुक बना रहा हूं जो निम्नलिखित कार्य करता है:

  1. अपने इनपुट तर्कों (dependencies) के आधार पर कुछ एपीआई से कच्चा डेटा प्राप्त करता है
  2. एक महंगे फ़ंक्शन (expensiveMath) का उपयोग करके डेटा को रूपांतरित करता है
  3. याद रखता है और परिणाम लौटाता है

मेरा कार्य इस तरह दिखता है:

function useMyData(...dependencies) {
  const raw = useFetch(mkUrl(dependencies), dependencies)
  const data = useMemo(() => expensiveMath(raw), dependencies)
  return data
}

raw केवल dependencies सरणी पर निर्भर करता है और expensiveMath केवल raw पर निर्भर करता है, जिसका अर्थ है कि यह केवल इनपुट तर्कों (dependencies) पर निर्भर करता है।

जब इनपुट तर्क नहीं बदले हैं तो मैं expensiveMath को कॉल करने से बचना चाहता हूं।

लेकिन समस्या यह है कि मुझे यह ESLint त्रुटि मिलती है:

ईएसएलिंट त्रुटि:

React Hook useMemo has a missing dependency: 'raw'. 
Either include it or remove the dependency array 
react-hooks/exhaustive-deps

मैं raw का उपयोग useMemo के लिए निर्भरता के रूप में नहीं कर सकता, क्योंकि यह अप्रत्याशित लंबाई वाली जटिल वस्तुओं की एक बड़ी सरणी है।

मेरे उपयोग-मामले के लिए सबसे अच्छा अभ्यास क्या है?

0
homam 18 जिंदा 2020, 18:29

1 उत्तर

सबसे बढ़िया उत्तर

यदि आप निर्भरता में raw शामिल नहीं करते हैं तो आपका कोड काम नहीं करेगा, क्योंकि raw फ़ेच पूरा होने पर बदलने वाला है।

पहले रेंडर पर, useFetch को कॉल किया जाता है और एक अनुरोध शुरू करता है, और फिर कुछ प्लेसहोल्डर देता है। अगर useFetch यह लाइब्रेरी है, तो वह प्लेसहोल्डर एक ऑब्जेक्ट है जिसमें loading: true और data: undefined। अगला useMemo चलता है, और उस लोडिंग प्लेसहोल्डर पर expensiveMath करता है।

दूसरे रेंडर पर, useFetch अब हो चुका है और वास्तविक डेटा लौटाता है। लेकिन चूंकि useMemo कच्चे को एक निर्भरता के रूप में सूचीबद्ध नहीं करता है, इसलिए याद किए गए मान का पुन: उपयोग किया जाता है। आप वास्तविक कच्चे डेटा पर expensiveMath नहीं करेंगे।

तो, निर्भरता सरणी में raw डालना ठीक है:

const data = useMemo(
  () => expensiveMath(raw), 
  [raw]
)

अब expensiveMath फ़ेच पूरा होने पर फिर से चलाएगा। मुझे उपयोगमेमो में dependencies डालने की कोई आवश्यकता नहीं दिखती, क्योंकि कोड के इस भाग में उनका उपयोग नहीं किया जाता है।

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

आकार कोई फर्क नहीं पड़ता। useMemo केवल पिछले मान और नए मान के बीच एक संदर्भ समानता जांच करता है। इसलिए जब तक useFetch को समझदार तरीके से लिखा जाता है, ताकि जब कुछ भी न बदले तो यह स्थिर संदर्भ लौटा सके, यह काम करेगा।

1
Nicholas Tower 18 जिंदा 2020, 18:42