Skip to content

Instantly share code, notes, and snippets.

Created November 26, 2019 21:39
What would you like to do?
(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
"Hello, " ($ Name user-name) "!")))
(defnc App []
(let [[state set-state] (hooks/use-state {:name "Helix User" :count 0})]
{: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)))))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment