व्युत्पन्न अवस्था क्या है? टेक्स्ट के लिए एक स्थिति और फिर अपरकेस टेक्स्ट के लिए दूसरी स्थिति के बारे में सोचें।

व्युत्पन्न अवस्था

function Foo() {
    const [text, setText] = useState('hello, za warudo!');
    const [uppercaseText, setUppercaseText] = useState(text.toUpperCase());

    useEffect(() => {
        setUppercaseText(text.toUpperCase());
    }, [text])

    ...
}

ऐसा कहें तो यह सोचना पागलपन है कि कोई ऐसा करेगा... सही है? सही?

हां, इस तरह के एक उदाहरण से स्पष्ट हो जाएगा कि यह गलत है।

व्युत्पन्न अवस्था का बुरा

• अलग से संग्रहीत और वास्तविक स्थिति के साथ समन्वय से बाहर।
• अनावश्यक री-रेंडर पर ट्रिगर (निर्भर)।

व्युत्पन्न स्थिति को दोबारा कैसे करें?

कहें कि यह एक महंगी गणना है... इसका समाधान यूज़मेमो का उपयोग करना है।

function Foo() {
    const [text, setText] = useState('hello, za warudo!');
    const uppercaseText = useMemo(() => text.toUpperCase(), [text]);
    ...
}

किस प्रकार शीघ्रता से उस स्थिति का पता लगाया जा सकता है जिसे प्राप्त किया जा सकता है?

मैं सोचने का एक अच्छा तरीका लेकर आया हूं जिससे यह आसान हो जाएगा जानना कि क्या एक राज्य को "दूसरा राज्य" होना चाहिए या सिर्फ एक गणना की गई संपत्ति (मामले के आधार पर याद किया जाना चाहिए या नहीं)।

function Foo({
    text = 'hello, za warudo!',
    uppercaseText = text.toUpperCase(),
}) {
    ...
}

// Forget react for a moment...
// Would you ever call a function like this?
const text = 'hello, za warudo!';
Foo({
    text,
    uppercaseText: text.toUpperCase(),
});

यदि आप उन राज्यों को "प्रॉप्स" के रूप में सोचते हैं, तो यह इसे और अधिक स्पष्ट रूप से वही बनाता है जो इसे होना चाहिए।

प्रतिक्रिया को पूरी तरह से भूल जाएं, केवल कार्यों के बारे में सोचें:
क्या आप एक फ़ंक्शन को एक वेरिएबल और फिर एक अन्य वेरिएबल के साथ कॉल करेंगे जिसकी आप गणना कर सकते हैं?