reactjs - これは React.useMemo を使用するユースケースの 1 つですか?

Question

以下のようなJSXを返すことは、高価な計算/計算と見なされますか? useMemo と useCallback をいつ使用するかについての Kent C Dodds の記事など、いくつかの記事を読みました。それらのほとんどは、アプリが遅いと感じたときにこれらの 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>
)