如何仅渲染受影响的子组件（而不是父组件）

Question

我正在开发一个包含许多此类字段的表格

// reducer & initial state

let UserForm = ({ ... }) => {

    const [state, dispatch] = useReducer(reducer, initialState)
    ....
    ....
    <SimpleField label="Login" error={state.errors.login}>
        <TextInput 
            // setting state.values.login in the reducer
            onChange={ (e) => dispatch({ type: 'SET_VALUES', field: 'login', value: e.target.value })  }
            value={state.values.login}
        />
    </SimpleField>
    ....

我注意到，例如当我开始在登录输入中键入内容时，整个UserForm组件就会开始渲染，我认为这对性能来说是一个致命的打击。

我了解到state.values.login处于UserForm组件的状态，因此必须进行渲染。

我如何仅使SimpleField组件（子级）渲染而不使UserForm组件（父级）渲染？

PS ：我曾经使用redux-form，但我注意到当我分派@@redux-form/CHANGE动作时，受影响的字段才被渲染。