React: हुक: useContext उपयोग के साथ अद्यतन नहीं

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

लगता है यह एक बग है । 😕

वर्तमान व्यवहार क्या है?

नेस्टेड संदर्भ प्रदाता और useContext हुक परस्पर विरोधी प्रतीत होते हैं, अपडेट खारिज हो जाते हैं।

अपेक्षित व्यवहार क्या है?

किसी संदर्भ से कनेक्ट करते समय, जब भी value परिवर्तन हो, इसे अपडेट करना चाहिए।

रिएक्ट के कौन से संस्करण और कौन से ब्राउज़र / OS इस समस्या से प्रभावित हैं?

• प्रतिक्रिया : 18.8.0-alpha.1 ( 16.7.0-alpha.0 पर भी पुनरुत्पादित)
• ब्राउज़र : chrome 71
• ओएस : macOS सिएरा

अधिक जानकारी

स्थानीय कनेक्शन "कनेक्शन" की सफाई पर काम करते हुए,
मैंने आधिकारिक प्रतिक्रिया प्रलेखन से 2 लेखों ( [1] & [2] ) को मिलाने की कोशिश की है, मैंने इसे हुक के साथ लागू किया है, लेकिन मान ऐसा नहीं लगता है।

मैंने codeandbox [3] पर एक सुव्यवस्थित डेमो डाला है।

वास्तविक कार्यान्वयन केवल कुछ पंक्तियाँ अधिक हैं (इसे से पार्स करना और इसे JSON में बदलना)।

वर्कअराउंड जो मुझे मिला:

• अगर मैं setValue फ़ंक्शन के आसपास प्रत्येक रेंडर पर एक नया फ़ंक्शन बनाता हूं, तो यह वास्तव में काम करता है।
  
  
  
  • लेकिन यह नए मूल्यों को बनाने से बचने के बारे में [1] की सलाह के खिलाफ जाता है।
  
  
• इसे एक वर्ग में माइग्रेट करें और componentDidUpdate बजाय useEffect ।
  
  
  
  • मैं वास्तव में अभी इस का उपयोग कर रहा हूँ, क्योंकि यह काम करता है। जिसमें राज्य में फ़ंक्शन का संदर्भ सहेजना शामिल है।
  
  

क्या ऐसा कुछ है जो नीचे दिए गए कोड पर काम नहीं करना चाहिए? प्रभाव परिवर्तनों के साथ शुरू हो जाता है,
लेकिन मूल्य हुक के माध्यम से खपत करने वाले घटकों पर अपडेट नहीं होता है। repro कोड [3]

const createLocalStorage = key => {
    const initialValue = localStorage.getItem(key)
    const ValueContext = createContext(initialValue)
    const SetterContext = createContext(() => {})

    const useStorage = () => [ValueContext, SetterContext].map(useContext)

    const Provider = ({children}) => {
        const [value, setValue] = useState(initialValue)

        useEffect(
            () => {
                console.log('effect', value)
                localStorage.setItem(key, value)
            },
            [value],
        )

        return (
            <ValueContext.Provider value={value}>
                <SetterContext.Provider value={setValue}>
                    {children}
                </SetterContext.Provider>
            </ValueContext.Provider>
        )
    }

    return [Provider, useStorage]
}

[1] : https://reactjs.org/docs/hooks-faq.html#how -to-avoid-pass-callbacks-down
[2] : https://reactjs.org/docs/context.html#updating -context-from-a-nested-Components
[3] : https://codesandbox.io/s/0yzjr8vnrv