Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Very slow input elements in Ant Design Form

Tags:

reactjs

antd

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>
like image 435
LearningMath Avatar asked Dec 07 '18 12:12

LearningMath


People also ask

What is valuePropName?

valuePropName is the name of the prop of the child component that will contain the value. In most cases, components such as Input or Select use value as the prop for holding the value. However, certain components such as Checkbox or Switch use checked .

Is antd heavy?

antd is 348kB uncompressed. The entire app including antd, React and stupidly large lodash plus lots of other stuff is 350kB gzipped.

How do you clear form data after submit in antd?

the simplest way to reset the entire form you use resetForm().


2 Answers

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);
like image 192
Zhiqiang Liu Avatar answered Nov 15 '22 03:11

Zhiqiang Liu


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

like image 29
Waleed93 Avatar answered Nov 15 '22 03:11

Waleed93