0

I have a dynamic form. The form grows in no preferred pattern based on user input and I capture all the user inputs from the form as React State.

On form submit I convert the State(JSON) into a YAML file.The JSON structure of this state has a deep tree with multiple data structures involved. As and when I change any of the elements in this deep tree, the form gets updated. But, As the dynamic form grows, the form loading time and reactive time increases. Is there any way to handle this complex states manipulation faster?

bks4line
  • 485
  • 3
  • 10
  • 23
  • For better performance, in your render method, avoid `this` bindings or arrow functions on event handlers(example: `onChange={()=>this.handleChange()}`) . Move the bindings to your constructor method. You can optimise further by better utilising the shoudlComponentUpdate lifecycle method for better DOM reconciliation. Read more about it [here](http://buildwithreact.com/article/optimizing-with-shouldcomponentupdate) and [here](https://facebook.github.io/react/docs/advanced-performance.html) – Galeel Bhasha Jul 19 '16 at 09:30

1 Answers1

0

so here is the approach i use

i make an array and add each dynamic sub from to array, if anything changes on it, i update specifically that indexed sub-form. so only a partial tree get updated.

i also generate the input names based in index so i can parse current index by splitting the name e.g. username-10 where 10 is from index and username is actual input. also add the onBlur instead of onChange.

abhirathore2006
  • 3,317
  • 1
  • 25
  • 29