Make it clear that sorting happens in the components and not in the app state

gistfile1.clj

(ns no-rerender.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))

(enable-console-print!)

(def app-state (atom [{:group "A" :text "An item of group A" :color "steelblue"}
                      {:group "B" :text "An item of group B" :color "steelblue"}]))

(def switch-color {"steelblue" "green"
                   "green" "steelblue"})

(defn item-view [item owner]
  (reify
    om/IDisplayName (display-name [_] "item-view")
    om/IRender
    (render [_]
     (println "Rendered item: " item)
     (dom/div #js {:style #js {:backgroundColor (:color item)}}
              (dom/button #js {:onClick #(om/transact! item :color switch-color)} "Switch Color")
              (:text item) "; Cursor path: " (prn-str (om/path item))))))

(defn app-state-view [items owner]
  (reify
    om/IDisplayName (display-name [_] "app-state-view")
    om/IRender
    (render [_]
     (dom/div nil
              (dom/h2 nil "App State")
              (dom/pre nil (.stringify js/JSON (clj->js items) nil 2))))))

;; Assume you shouldn't do any sorting in your app state. This simulates receiving a
;; state update from the server which causes your vector to be reordered arbitrarily.
(def reorder-list (comp vec reverse))

(defn app-view [items owner]
  (reify
    om/IDisplayName (display-name [_] "app-view")
    om/IRender
    (render [_]
     (apply dom/div nil
              (println "Rendered app-view")
              (dom/button #js {:onClick (fn [_] (om/transact! items reorder-list))} "Reorder List")
              (om/build-all item-view (sort-by :group items) {:key :group})))))

(om/root
 app-view
 app-state
 {:target (. js/document (getElementById "app"))})