0

I am trying to create form using React Flux. Steps

  1. Rest api to get form fields Information
  2. In componentdidupdate i call action to update form fields information into store
  3. Form gets rerender fine
  4. I pass action to form fields when form fields change i update the form fields using action and update the store and it gets rerender

Problem If my form contains more than 500 fields fields update its getting slow

action

create_form update_form_field_value

store

var _form_field_info=[{id:"t1",type:"text",value:""}, {id:"t2",type:"text",value:"default value"} ]; 

get_form_field() return _form_field_info 

_setFieldValue(index,val) set _form_field_info[index].t1.value=val

View

<FormContainer> 
  <Form {...formFields} {...actions}/> 
</FormContainer> 

<Form> 
iterate fields 
<Form.Input {...formField} {...actions}/> ... 
iterate end 
</Form> 

Thanks....

Vimalesan
  • 165
  • 2
  • 2
  • 9
  • how should one see why this is getting slow? relevant code is missing. Please show all of the relevant component, store and the function where you fetch the values from flux – Max Bumaye Aug 04 '15 at 07:00
  • 500 fields is **a lot**. You'll probably need to break it into components with smaller groups of inputs and implement shouldComponentUpdate for these groups to avoid the tree diffs. Also pseudo code isn't really helpful. – Brigand Aug 04 '15 at 07:39
  • Thanks... working fine with shouldComponentUpdate [link](https://github.com/vimalesan/react-example) – Vimalesan Aug 04 '15 at 14:10
  • Possible duplicate of [Performance issue with React](http://stackoverflow.com/questions/34983963/performance-issue-with-react) – Paul Sweatte Sep 08 '16 at 17:14

0 Answers0