Что такое производное состояние? Подумайте об одном состоянии для текста, а затем о другом для текста в верхнем регистре.

Производное состояние

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, думайте только о функциях:
Вызовете ли вы функцию с переменной, а затем с другой переменной, которую можно просто вычислить внутри?