ما هي الحالة المشتقة؟ فكر في حالة واحدة للنص ثم أخرى للنص الكبير.

الدولة المشتقة

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

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

    ...
}

من الجنون الاعتقاد بأن أي شخص سيفعل هذا ... أليس كذلك؟ يمين؟

نعم، مثال مثل هذا سيوضح أن هذا خطأ.

سوء الدولة المشتقة

• مخزنة بشكل منفصل وغير متزامن مع الحالة الفعلية.
• المشغلات (تعتمد) على عمليات إعادة العرض غير الضرورية.

كيفية إعادة هيكلة الحالة المشتقة؟

لنفترض أنها عملية حسابية باهظة الثمن... الحل هو استخدام useMemo.

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(),
});

إذا كنت تفكر في تلك الحالات على أنها "دعائم"، فهذا يجعلها أكثر وضوحًا مما ينبغي أن تكون عليه.

انسوا React تمامًا، فكروا فقط في الوظائف:
هل يمكنك استدعاء دالة تحتوي على متغير ثم متغير آخر يمكنك حسابه بداخلها؟