I work on the react-native application using Clojurescript re-frame and reagent. I have one text input component, and have two versions of the code:
Version 1: input text is a separate component, and state atom is passed as an argument, the same as the recommended in the reagent library docs and examples.
(defn todo-input [value] [rn/text-input {:style (styles :textInput) :multiline true :placeholder "What do you want to do today?" :placeholder-text-color "#abbabb" :value @value :on-change-text #(reset! value %)}] )(defn todo-screen [] (let [value (r/atom nil)] [rn/view {:style (styles :container)} [rn/text {:style (styles :header)} "Todo List"] [rn/view {:style (styles :textInputContainer)} [todo-input value] [rn/touchable-opacity {:on-press (fn [] (rf/dispatch [:add-todo @value]) (reset! value nil))} [icon {:name "plus" :size 30 :color "blue" :style {:margin-left 15}}]]] [todos] ]))
Version 2: everything in one component.
(defn todo-screen [] (let [value (r/atom nil)] [rn/view {:style (styles :container)} [rn/text {:style (styles :header)} "Todo List"] [rn/view {:style (styles :textInputContainer)} [rn/text-input {:style (styles :textInput) :multiline true :placeholder "What do you want to do today?" :placeholder-text-color "#abbabb" :value @value :on-change-text #(reset! value %)}] [rn/touchable-opacity {:on-press (fn [] (rf/dispatch [:add-todo @value]) (reset! value nil))} [icon {:name "plus" :size 30 :color "blue" :style {:margin-left 15}}] ]] [todos]]))
The issue is that first version has a performance issue while typing, since there's a big delay and flickering when trying to type fast. Version 2 doesn't have any issues, and I can type as fast as I can.
According to the reagent documentation, passing r/atom as a parameter should not incur any performance issues.
Am I doing something wrong here? What would be the best way to avoid performance penalty here.
This is a small example, and having one component instead of two is not a big deal, but splitting one big to multiple smaller components in a good praxis. State here is local to the component, and I don't want to use re-frame for it.