Это один из вариантов использования React.useMemo?

Question

Считается ли возврат JSX, как показано ниже, дорогостоящим вычислением / расчетом? Я прочитал несколько статей, в том числе статью Кента Доддса о том, когда использовать useMemo и useCallback. Большинство из них явно говорят использовать этот API, когда ваши приложения работают медленно. Хотелось бы знать, что сообщество React думает об этом

Вот мой код:

...few codes above
const dynamicJSX = React.useMemo(() => {
        switch(input.vitalType) {
            case 'BLOOD_PRESSURE': {
                return (
                    <Col span={24}>
                        <Row gutter={16}>
                            <Col lg={12} md={24} sm={24} xs={24}>
                                <Input
                                    type="text"
                                    name="systolic"
                                    label={t('label.systolic')}
                                    onChange={onChange}
                                    value={input.systolic}
                                    error={error.systolic}
                                    required={true}
                                    onPressEnter={onPressEnter}
                                />
                            </Col>

                            <Col lg={12} md={24} sm={24} xs={24}>
                                <Input
                                    type="text"
                                    name="diastolic"
                                    label={t('label.diastolic')}
                                    onChange={onChange}
                                    value={input.diastolic}
                                    error={error.diastolic}
                                    required={true}
                                    onPressEnter={onPressEnter}
                                />
                            </Col>
                        </Row>
                    </Col> 
                )
            } 

            case 'GLUCOSE': {
                return (
                    <Col span={24}>
                        <Row gutter={16}>
                            <Col lg={12} md={24} sm={24} xs={24}>
                                <Select
                                    label={t('label.conditions')}
                                    name="conditions"
                                    required={true}
                                    onChange={(value) => onSelectChange('conditions', value)}
                                    value={input.conditions}
                                    error={error.conditions}
                                    placeholder={t('opt.select_one')}
                                    dropOptions={[
                                        { label: t('opt.fasting'), value: 'FASTING' },
                                        { label: t('opt.after_meal'), value: 'AFTER_MEAL' },
                                        { label: t('opt.hours_after_meal'), value: '2_TO_3_HOURS_AFTER_MEAL' }
                                    ]}
                                />
                            </Col>
                                    
                            <Col lg={12} md={24} sm={24} xs={24}>
                                <Input
                                    type="text"
                                    name="value"
                                    label={t('label.value')}
                                    onChange={onChange}
                                    value={input.value}
                                    error={error.value}
                                    required={true}
                                    onPressEnter={onPressEnter}
                                />
                            </Col>
                        </Row>
                    </Col>
                )
            }

            default:
                return (
                    <Col lg={12} md={24} sm={24} xs={24}>
                        <Input
                            type="text"
                            name="value"
                            label={t('label.value')}
                            value={input.value}
                            error={error.value}
                            required={true}
                            onPressEnter={onPressEnter}
                            onChange={onChange}
                        />
                    </Col>
                )
        }
    }, [input.vitalType]);
    
return (
   <div>
      /// few codes here
     {dynamicJSX}
   </div>
)

Answer 1

Прежде всего вам нужно указать зависимости в вашем useMemo для реквизита, который вы используете onChange, onPressEnterи так далее. Теперь это не будет иметь большого значения в производительности в этом случае, поскольку компонент будет повторно рендерить в любом случае изменения свойств, и поэтому useMemo.

Основной вариант использования useMemo находится в побочных эффектах, когда мы выполняем некоторые вычисления, такие как результат асинхронной задачи, лучше запоминать результат, а не пересчитывать при каждом рендеринге.