helix_context_memo.cljs

(ns helix-context-memo
  (:require [helix.core :refer [defnc $ <>]]
            [helix.dom :as d]
            [helix.hooks :as hooks]
            ["react-dom" :as rdom]
            ["react" :as react]))

(def global-state-context (react/createContext {}))

(def GlobalStateProvider (.-Provider global-state-context))

(defnc Name [{:keys [children]}]
  (let [super-expensive (compute-super-expensive-thing)]
    (d/strong children)))

(defnc MyComponent []
  (let [global-state (hooks/use-context global-state-context)
        user-name (:name global-state)]
    ;; memo annotation ensures this will only re-render children when `user-name` changes
    ^:memo
    (d/div
      "Hello, " ($ Name user-name) "!")))

(defnc App []
  (let [[state set-state] (hooks/use-state {:name "Helix User" :count 0})]
    (GlobalStateProvider
      {:value state}
      ($ MyComponent)
      (d/input {:on-change #(set-state assoc :name (.. % -target -value))
                :value (:name state)})
      (d/button {:on-click #(set-state update :count inc)}
                (:count state)))))