Reagent 101 / why Form 2 components need to return a function

Let's take a look at a canonical example of a Form 2 component.

(defn app-view []
  (let [counter (r/atom 0)] ;; setup
    (fn [] ;; render fn
      [:div
       [:p @counter]
       [:button
        {:on-click
         (fn [e]
           (swap! counter inc))}
        "Increment!"]])))

We initialize some local state and return a function that returns some Hiccup. On click, we would see the correct behavior: the counter incrementing.

Imagine if we didn't return that inner function. What would happen?

(defn app-view [] ;; render fn
  (let [counter (r/atom 0)] ;; setup
    [:div
     [:p @counter]
     [:button
      {:on-click
       (fn [e]
         (swap! counter inc))}
      "Increment!"]]))

The counter feature would break. Remember: in a Form 2 component, we have an outer function that is run only once and an inner function that is run every time the component re-renders.

When we don't have an inner function, the outer function assumes the role of a render function.

In the example above, this means that app-view gets re-run every time the component renders. Do you understand the problem now? The component-state is getting re-created with every render. We get a new counter r/atom on each re-render.

If a component does not re-render, it may be because you're re-creating state on every re-render.

Warmly,
DH

Comments

[Hayoung Lee(이하영)]

Great article!