Performance Problems

[Ayush]

Okay, I am using this library with re-frame and it works quite well for small to moderate size forms. However, I have a very large form with 26 text inputs, 3 text-area and around a 100 field-arrays some of which themselves have around 10 fields at minimum. It does seem a lot but well, I am using it in a form for some official paperwork, so yeah, there is a lot of useless fields present.

Anyway, using all of that in a single form brings even entering a single letter painfully slow. My current solution is to divide up the form into small chunks and make them individual forms and that works fine. However, I was wondering if there is a better way, or maybe some tricks I am not aware of?

[Lucio D'Alessandro]

Hello! I have to say you are really stress testing the library 😃! I'd need to know a bit more about your implementation to tell you what can be done to improve performance. Anyways, it seems like the problem is caused by the re-rendering of the whole form or big parts of it when you touch any input. What you can do to limit the re-renders exclusively to the components that do change, is to make them all independent components. For example, every time you use a loop to dynamically generate inputs make sure you don't do this:

(map-indexed
 (fn [idx field]
   ^{:key idx}
   [:div
    [:input
     {:name "foo"
      :value (get field "foo")
      :on-change #(handle-change % idx)
      :on-blur #(handle-blur % idx)}]])
 fields)

but instead make a component, so that the ones that don't change on user input won't be uselessly re-rendered.

(defn my-input
  [field idx handle-change handle-blur]
  [:div
   [:input
    {:name "foo"
     :value (get field "foo")
     :on-change #(handle-change % idx)
     :on-blur #(handle-blur % idx)}]])

;; field-array component
...
(map-indexed
 (fn [idx field]
   ^{:key idx}
   [my-input field idx handle-change handle-blur])
 fields)
...

Given the number of inputs you are using this solution might be enough to boost up performance.

[Ayush]

Thanks, your solution brought the form from unusable to pretty good. I think if I break a few more components this way, I might be able to make it perfect.
Also thanks for the great library.

[Lucio D'Alessandro]

You're welcome! I'm glad the components split up was effective :)