Repository: penpot/penpot
File: frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs (ClojureScript)

Code before:
   ::mf/memo true}
  [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted]}]
  (let [id                (:id item)
        blocked?          (:blocked item)
        hidden?           (:hidden item)

        drag-disabled*    (mf/use-state false)
        drag-disabled?    (deref drag-disabled*)

        scroll-to-middle? (mf/use-var true)
        expanded-iref     (mf/with-memo [id]
                            (-> (l/in [:expanded id])
                                (l/derived refs/workspace-local)))
        expanded?         (mf/deref expanded-iref)

        selected?         (contains? selected id)
        highlighted?      (contains? highlighted id)

        container?        (or (cfh/frame-shape? item)
                              (cfh/group-shape? item))

        read-only?        (mf/use-ctx ctx/workspace-read-only?)
        parent-board?     (and (cfh/frame-shape? item)
                               (= uuid/zero (:parent-id item)))

        files             (mf/deref refs/files)

        toggle-collapse
        (mf/use-fn
         (mf/deps expanded?)
         (fn [event]
           (dom/stop-propagation event)
           (if (and expanded? (kbd/shift? event))
             (st/emit! (dwc/collapse-all))
             (st/emit! (dwc/toggle-collapse id)))))

        toggle-blocking
        (mf/use-fn
         (mf/deps id blocked?)
         (fn [event]
           (dom/stop-propagation event)
           (if blocked?
             (st/emit! (dw/update-shape-flags [id] {:blocked false}))
             (st/emit! (dw/update-shape-flags [id] {:blocked true})
                       (dw/deselect-shape id)))))

        toggle-visibility
        (mf/use-fn
         (mf/deps hidden?)
         (fn [event]
           (dom/stop-propagation event)

Review comment (performance):
This deref is a huge performance issue, because it completelly cancells all the optimizations  applied for make this sidebar more or less performant (mainly because now, any change of file will rerender all layer items)

Code after:
   ::mf/memo true}
  [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted]}]
  (let [id                (:id item)
        blocked?          (:blocked item)
        hidden?           (:hidden item)

        drag-disabled*    (mf/use-state false)
        drag-disabled?    (deref drag-disabled*)

        scroll-to-middle? (mf/use-var true)
        expanded-iref     (mf/with-memo [id]
                            (-> (l/in [:expanded id])
                                (l/derived refs/workspace-local)))
        expanded?         (mf/deref expanded-iref)

        selected?         (contains? selected id)
        highlighted?      (contains? highlighted id)

        container?        (or (cfh/frame-shape? item)
                              (cfh/group-shape? item))

        read-only?        (mf/use-ctx ctx/workspace-read-only?)
        parent-board?     (and (cfh/frame-shape? item)
                               (= uuid/zero (:parent-id item)))

        toggle-collapse
        (mf/use-fn
         (mf/deps expanded?)
         (fn [event]
           (dom/stop-propagation event)
           (if (and expanded? (kbd/shift? event))
             (st/emit! (dwc/collapse-all))
             (st/emit! (dwc/toggle-collapse id)))))

        toggle-blocking
        (mf/use-fn
         (mf/deps id blocked?)
         (fn [event]
           (dom/stop-propagation event)
           (if blocked?
             (st/emit! (dw/update-shape-flags [id] {:blocked false}))
             (st/emit! (dw/update-shape-flags [id] {:blocked true})
                       (dw/deselect-shape id)))))

        toggle-visibility
        (mf/use-fn
         (mf/deps hidden?)
         (fn [event]
           (dom/stop-propagation event)
           (if hidden?
             (st/emit! (dw/update-shape-flags [id] {:hidden false}))