Is this one of the use case to use React.useMemo?

Question

Does returning a JSX like below considered as a expensive computation/calculation ? I read a few articles including Kent C Dodds article about when to use useMemo and useCallback. Most of them explicitly say to use those API when your apps feel slow. Would love to know what the React community think about this

Here is my code:

...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

First of all you need to specify dependencies in your useMemo for the props you are using like onChange, onPressEnter and so on. Now it won't make much performance difference in this case as component is going to re-render anyways prop changes and so is useMemo.

Main use case of useMemo is in side effects, when we do some calculation like as result of async task its better to memoize the result instead of recomputing on every render.