Very slow input elements in Ant Design Form

Question

I am using React and Ant Design for React, and I'm trying to build a form with 10 to 15 input elements. The input is very slow. I'm using their examples in the documentation as a reference and I'm not doing anything different. What might cause my problem? Here is a code for reference:

const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };

<Form inline="true" onSubmit={this.handleSubmit}>
          <Row gutter={8}>
            <Col span={15}>
              <FormItem {...formItemLayout} label="Name">
                {getFieldDecorator(
                  `category[categories_langs][na5me]`)(
                    <Input/>
                )}
              </FormItem>
            </Col>
          </Row>
          
          // The above Row repeated ten-fifteen times

</Form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

This should be antd and rc-form issue. See: https://github.com/ant-design/ant-design/issues/14054

So far, a workaround is to use debounce method to improve the input experience. You can create a high-level component to wrap Input component. The lib https://www.npmjs.com/package/react-component-debounce can help you to do so. The similar code as follows:

import reactComponentDebounce from 'react-component-debounce';

const DebounceInput = reactComponentDebounce({
    valuePropName: 'value',
    triggerMs: 250,
  })(Input);

Answer 2

It may most probably be due to unnecessary re-rendering of other components every time you call setState().

So to avoid the response lag:

• use PureComponent (you can also use shouldComponentUpdate lifecycle method but it's more error-prone) instead of simple Component when extending you class-based component

• if using functional component, use React.memo()

Make sure you are using latest version of React