Fork me on GitHub
#re-frame
<
2020-08-28
>
erwinrooijakkers17:08:28

I am having a situation where my initial page load does work when I use save a page once in shadow-cljs and it rerenders, but not on initial load

erwinrooijakkers17:08:47

I have (fn [] ...) in the right places

erwinrooijakkers17:08:59

What is usually the cause of this? How to fix?

p-himik17:08:15

I've encountered this some time ago. As far as I recall, it was a timing issue. I.e. I was expecting something to be ready by the moment the rendering is started, but it was not.

erwinrooijakkers17:08:23

Yes that’s the case here too

erwinrooijakkers17:08:39

I have something like this:

(defn container [user-info organization-paths] (let [path (re-frame/subscribe [:permission-panel/active-organization-path]) organization (re-frame/subscribe [:permission-panel/active-organization])] (fn [] [:div.ml-6 [permission-panel @path user-info @organization]])))``` I expect permission-panel to rerender when there’s a new @organization

erwinrooijakkers17:08:54

And I create a Reagent state from these contents that I update:

(defn permission-panel [path user-info organization]
  (let [state (r/atom (permission-state user-info organization))]
    (fn []
      [history-block @state])))

erwinrooijakkers17:08:14

With sub like this:

(re-frame/reg-sub
 :permission-panel/active-organization
 (fn [{:permission-panel/keys [active-organization-path] :as db}]
   (get-in db [:organisatie/organizations active-organization-path])))

erwinrooijakkers17:08:24

On initial page load the active-organization is nil

erwinrooijakkers17:08:29

But it is fetched and then it should reload

erwinrooijakkers17:08:34

Which it does not

p-himik18:08:30

Why do you wrap (permission-state ...) in an atom in the first place? Just use it directly, and there won't be the need for the :key metadata.

erwinrooijakkers18:08:16

permission-state creates the initial state that is used for updating and stuff

erwinrooijakkers18:08:32

It needs to be r/atom because other components use the state to update checkboxes and stuff and @state to rerender themselves

erwinrooijakkers18:08:49

It’s basically component local state

erwinrooijakkers18:08:13

Same problem if I put it in app-db, but I think this is bit nicer since it’s local state

erwinrooijakkers18:08:17

Thanks for the help!

erwinrooijakkers18:08:47

I found the solution!

erwinrooijakkers18:08:12

I added a ^{:key}

erwinrooijakkers18:08:27

Based on the thing that changed later

erwinrooijakkers18:08:52

(defn container [user-info organization-paths]
  (let [path (re-frame/subscribe [:permission-panel/active-organization-path])
        organization (re-frame/subscribe [:permission-panel/active-organization])]
    (fn []
      [:div.ml-6
       ^{:key (:some-value @organization)}
       [permission-panel @path user-info @organization]])))

erwinrooijakkers18:08:03

Then the rerender workd