re-frame 2019-08-04 | Slack Archive

How can I see or log day8.re-frame.http-fx request before sending it.

Dear fellow re-frame users, have you ever faced the question of view key management? I initially fed entities ids to reagent as views keys. But when a new entity under a view is saved, it obtains a server ID, so its key changes and its view re-renders losing focus and user’s patience. As a result, I do some unnecessary things with key management. I suspect that I can somehow do better than this.

Lu18:08:55

Can you give a small example ? :)

Ivan Fedorov21:08:21

#Also sent to the channel

how it was initially

--- entity created ---
(assoc-in db [:entities client-id] entity)
--- render entity ---
^{:key (:id new-entity)} [view new-entity] ; gives client-id
--- do changes ---
--- persist to server ---
--- update entity id ---
--- render again ---
^{:key (:id entity)} [view entity] ; gives server-id, forces re-render, loses focus

Ivan Fedorov21:08:51

#Also sent to the channel

how I re-wrote it

--- entity created ---
(assoc-in db [:entities client-id] entity)
--- add view key ---
(assoc-in db [:ui/main-pane-keys client-id] (str "main-pane-" client-id))

--- render-entity ----
^{:key (get-in db [:ui/main-pane-keys client-id])} [view new-entity] ; gives client-id based key
--- persist to server ---
--- update entity id ---
--- add mapping from server id to view-key ---
--- render again ---
^{:key (get-in db [:ui/main-pane-keys server-id])} [view entity] ; still gives client-id based key, so no re-render, keeps focus

Ivan Fedorov21:08:28

@UE35Y835W

Lu12:08:00

I see! You could create instead a react class like this:

(defn foo [entity]
  (r/create-class
   {:should-component-update
    (fn [this old-props new-props]
      ;; re-render only when anything but :entites changes
;; the component rerenders only when true is returned  )
    :reagent-render
    (fn [entity]
      ^{:key (:id entity)}
      [view entity])})))

Lu12:08:04

But I don't see any particular problem with your approach either.. I am just giving a different solution you might or might not find more suitable for your specific use case 🙂

Lu12:08:56

Just be careful about this: >We do not recommend doing deep equality checks or using JSON.stringify() in shouldComponentUpdate(). It is very inefficient and will harm performance.

Lu13:08:27

You could do a simple keys on the diff and just re-render if count is greater than 1 or if the changing key is not :entities

oconn13:08:09

@ahmed1hsn you can add an interceptor to you event that logs it in the after fn.

👍 4

Ahmed Hassan19:08:34

which interceptor is that?

akond18:08:16

what's the proper way for animation in re-frame?

👍 4

Ivan Fedorov21:08:21

replied to a thread:Dear fellow re-frame users, have you ever faced the question of view key management? I initially fed entities ids to reagent as views keys. But when a new entity under a view is saved, it obtains a server ID, so its key changes and its view re-renders losing focus and user’s patience. As a result, I do some unnecessary things with key management. I suspect that I can somehow do better than this.

how it was initially

--- entity created ---
(assoc-in db [:entities client-id] entity)
--- render entity ---
^{:key (:id new-entity)} [view new-entity] ; gives client-id
--- do changes ---
--- persist to server ---
--- update entity id ---
--- render again ---
^{:key (:id entity)} [view entity] ; gives server-id, forces re-render, loses focus

Ivan Fedorov21:08:51

how I re-wrote it

--- entity created ---
(assoc-in db [:entities client-id] entity)
--- add view key ---
(assoc-in db [:ui/main-pane-keys client-id] (str "main-pane-" client-id))

--- render-entity ----
^{:key (get-in db [:ui/main-pane-keys client-id])} [view new-entity] ; gives client-id based key
--- persist to server ---
--- update entity id ---
--- add mapping from server id to view-key ---
--- render again ---
^{:key (get-in db [:ui/main-pane-keys server-id])} [view entity] ; still gives client-id based key, so no re-render, keeps focus

2019-08-04

Channels