track dependencies to selectively rerender with useMemo about hx HOT 3 OPEN

The primary problem is still knowing whether the performance impact of memoizing the calculation is less than the performance impact of running the render function again.

One thing I do have on an alpha branch are some macros that will automatically detect what dependencies to add to the array we give to React's useMemo / useEffect / etc. Something like:

(use-memo
  [foo] ;; <-- normal use, passing in a vector of deps to give to React for memoizing the calculation
  (+ foo 1))

(use-memo
  :auto-deps ;; <-- tells macro to detect and add dependencies in the calculation automatically
  (+ foo 1)) ;; <-- macro will detect that `foo` is used in this and add it to the deps passed to React

Re: mobx. Mobx works similar to Reagent, and the way they are able to optimize renders is by tracking state outside of the render tree. The same thing can be done with hx, but it comes with some drawbacks. The pure React way focuses on keeping state within the render tree and aggressively annotating our components with memo when needed, I don't think hx can get around that yet.

from hx.

I see, thanks for clarifying.

the biggest issue imo is not one-off declarations / nesting props but trying to use Context API for global state management, since all consuming components render for on any state change, regardless of whether their using the state. and it'd be great not to have to always use use-memo when consuming a context provider

maybe like the use-memo :auto-deps, there can also be a create-context utility for overcoming the above issue. react-tracked and constate are examples I've been looking at

from hx.

I've thought about this some more and I like what you're thinking about re: Context.

I think that this should still be opt-in, but can be made much more ergonomic with some syntax sugar.

What I'm currently playing with in my head is annotating expressions with metadata, which the defnc macro could then inspect and expand into a call to use-memo or use-callback. For instance:

(defnc MyComponent []
  (let [state (hooks/useContext global-state-context)
          foo (:foo state)]
    ^:memo [:div foo]))

Which would be expanded to:

(defnc MyComponent []
  (let [state (hooks/useContext global-state-context)
          foo (:foo state)]
    (hooks/useMemo
      (fn [] [:div foo])
      [foo])))

from hx.