Skip to content

Instantly share code, notes, and snippets.

@jmlsf

jmlsf/reagent-render-remount.md

Last active February 27, 2018 03:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jmlsf/0a78c196cf3c45db15fd7df8cbee2b22 to your computer and use it in GitHub Desktop.
Save jmlsf/0a78c196cf3c45db15fd7df8cbee2b22 to your computer and use it in GitHub Desktop.
Download ZIP
reagent/render forces a remount
Raw
reagent-render-remount.md 
(defn form2-child-component [num]
  (print "form2-child-component being created")
  (let [pointless-atom (reagent/atom nil)]
    (print "form2-child-component being rendered")
    (fn [num]
      [:div num])))

(defn form3-child-component [num]
  [num]
  (let [pointless-atom (reagent/atom nil)]
    (reagent/create-class
     {:component-did-mount
      (fn [this] (print "form3-child-component being mounted"))
      :component-will-unmount
       (fn [this] (print "form3-child-component being unmounted"))
      :reagent-render
      (fn [num]
        (print "form3-child-component being rendered")
        [:div num])})))

(defn test-component []
  (print "test-component being rendered")
  [:div
    [form2-child-component 2]
    [form3-child-component 3]])

(defn mount-root []
  (reagent/render [#'test-component]
    (.getElementById js/document "app"))
  (js/setTimeout (fn []
                    (reagent/render [#'test-component]
                       (.getElementById js/document "app")))
                 1000))

In console:

test-component being rendered
form2-child-component being created
form2-child-component being rendered
form3-child-component being rendered
form3-child-component being mounted
form3-child-component being unmounted
test-component being rendered
form2-child-component being created
form2-child-component being rendered
form3-child-component being rendered
form3-child-component being mounted
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment