Quantcast
Channel: Reagent performance issue when passing atom as a function parameter - Stack Overflow
Viewing all articles
Browse latest Browse all 4

Reagent performance issue when passing atom as a function parameter

$
0
0

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.


Viewing all articles
Browse latest Browse all 4

Latest Images

Trending Articles





Latest Images