Please report back if you can or cannot get it to work... I haven’t had time to test it thoroughly

I cannot get it to work. At first I thought it was because project uses React Native Web but even with a basic counter using helix dom it does not rerender

example counter code I’m using:

(defnc App
  []
  (let [[count set-count] (h/use-state 0)]
    (d/div {:on-click #(set-count (inc count))}
           (d/button {:on-click #(set-count (inc count))} "Add")
           count)))

(defn ^:export mount
  [el]
  (rdom/render (App) (js/document.getElementById el)))

this works when defnc has helix factory off, but now when it has it on

can you show me the macroexpand when factory is on?

i’m on mobile atm, I can pull my computer out here in a few mins

hm example above just prints (App)

(macroexpand '(App))

ah sorry, try macroexpanding the defnc

(do
 (if goog/DEBUG (def sig36351 (helix.core/signature!)))
 (def
  c-render-type
  (clojure.core/->
   (clojure.core/fn
    c-render-type
    [props__33703__auto__ maybe-ref__33704__auto__]
    (clojure.core/let
     [[]
      [(helix.core/extract-cljs-props props__33703__auto__)
       maybe-ref__33704__auto__]]
     (if goog/DEBUG (clojure.core/when sig36351 (sig36351)))))
   (clojure.core/cond->
    (clojure.core/true? goog/DEBUG)
    (clojure.core/doto
     (goog.object/set "displayName" "cljs.user/c")))))
 (def c (helix.core/cljs-factory c-render-type))
 (clojure.core/when
  goog/DEBUG
  (clojure.core/when sig36351 (sig36351 c-render-type "" nil nil))
  (helix.core/register! c-render-type "cljs.user/c")) 
 c)

what specifically is that testing? i.e. I see the {:updatedFamilies {,,,} :staleFamilies {,,,}} in the console but 1) if I change some text I don’t see it update 2) it isn’t showing me whether hook state is preserve, which is why I used the counter example

I was testing just that editing the text updated

I just tested that state works too

weird copied and pasted same code, might be my shadow-cljs setup :thinking_face:

I’m uploading a repo so you can look at it

https://github.com/Lokeh/helix-fast-refresh-factory

don’t know why I didn’t try this earlier but nuked all deps in my monorepo and it’s working

appreciate the help

rough, but I’m glad it’s working now

sure thing. it forced me to actually test my code, too 🙂

there was a recent discussion about global state (https://clojurians.slack.com/archives/CRRJBCX7S/p1589820944328100) basically state management options are in a flux bc concurrent react has been unstable, so best to stick with hooks + context API if you can, since it’s easier to migrate out of that

Thanks for sharing. I actually read that, but had the same thoughts as the poster, that context would make sense if not for the fact that consumers re-render on state changes. So it is best for simple things like an app theme, which doesn't change frequently.

I agree with you also, I am leaning towards sticking to plain React as much as possible for ease of migration later, which basically means use hooks/props. Hmm, guess I will do that and re-evaluate if necessary later.

Maybe if I just make sure context is close to the components that need it, then it won't be that bad. Thanks, that was helpful.

my opinion is that “global app state” isn’t the right problem to think about

there are many kinds of “global” state that might want different solutions

if you break it down like: • theme • navigation • data cache • notifications • modals each of these are cross-cutting concerns for your application, but can have very different requirements from each other

@U013CA8A28J there’s also libraries that make it easier to use react context and avoid rerenders one I’ve tried out in a past js project is constate: https://github.com/diegohaz/constate

@lilactown True. I like the simplicity of the idea of dealing with them the same way, but you are right that they are not the same.

@alidcastano Ty, I will check that out

I think that if we were to put on our Rich Hickey hat, that it’s “easy” to put it all in one place, but “simple” would be to manage them separately :D

anyway I know that it’s a non-answer, since I don’t really have a recommendation for how to manage all of those

what makes sense to me right now is to put it all in context, and hide it behind a hook that I can change to use a mutable store later if perf starts to suck

Right, interesting. Does that mean you would (if starting a new app) try to avoid using re-frame?

I can see now, thinking about it, that context would work better if you made sure to keep concerns narrow and have few consumers. (if you assume state updates will be frequent enough to affect performance)

yeah I wouldn’t use re-frame

you can pass an event emitter into context too

similar to what redux does

but I would create custom hooks for specific things, and pass in the global state via context

e.g.:

(def theme-context (helix.core/create-context {,,,}))

(defnc theme-provider
 [{:keys [children]}]
 (let [[current-theme set-theme] (hooks/use-state {:mode :light})]
   ($ (.-Provider theme-context)
      {:value current-theme}
      children)))

(defhook use-theme
  []
  (let [current-theme (hooks/use-context theme-context)]
    ,,,))

the implementation of use-theme and theme-provider is completely hidden from your components, so you can later have it use a global atom that you pass into context instead of local state

Oh that's fantastic ty! That clears up a lot for me.

my favorite pattern for components is to export a reducer 😄

and some event handler functions that can be configured with namespaces so different versions of the same component although use exactly the same code to maintain state at the same time, they write in different places

context is not slow for simple SPA navigation and basic form validation - interactions

is this the PR you meant to link? i see the ^memo and ^callback helpers not the $ stuff

yeah it is. what I meant is that the same concept that allows ^:memo and ^:callback to be expanded to (use-memo ,,,) and (use-callback ,,,) can be applied to calling components like (component ,,,) and expanding it to ($ component ,,,)