Rookie mistake with local state

context.md

Theses are two implmentation of the same components. The component is a label, with two button, one to increase the counter, and one to decrease.

The counter's value can't go bellow zero.

In the first implmentation, there is a tiny bit of logic that is miss placed. This logic is executed when the component is rendered. This is bad because the effect of this logic will never appear.

On the second implementaition the "previous-value" is computed with a corrected value (min 0). So everything is in place when the dec button is pressed. And we don't need to render cycle to get the correct result.

non-working-component.cljs

(defn counter []
  (let [value (r/atom 0)]
    (fn []
      (let [current-value @value
            inc-value #(swap! value inc)
            dec-value #(reset! value dec)
            reset-value #(reset! value 0)]

        (if (< current-value 0) (reset-value))

        [:div
         [:p (str "Counter is" current-value)]
         [:button {:on-click inc-value} "Increment"]
         [:button {:on-click dec-value} "Decrement"]]))))

working-component.cljs

(defn counter []
  (let [value (r/atom 0)]
    (fn []
      (let [inc-value #(swap! value inc )
            dec-value #(swap! value #(if (< % 1 ) 0 (dec %))]

        [:div
         [:p (str "Counter is" @value)]
         [:button {:on-click inc-value} "Increment"]
         [:button {:on-click dec-value} "Decrement"]]))))