use-memo and use-callback via metadata

[lilactown]

We should be able to signal that an expression should be wrapped in a use-memo or use-callback by annotating it with metadata in the body of a defnc or a defhook.

(defnc my-component
  [{:keys [value]}]
  ^:memo (d/div value)) ;; returns the same react element for the save `value`

^:memo and ^:callback metadata should tell defnc and defhook to emit a use-memo or use-callback hook that will automatically fill dependencies using the same algorithm as :auto-deps.

A dependency seq can also be provided to override this behavior:

(defnc my-component
  [{:keys [foo bar baz]}]
  ^{:memo [foo]} (d/div value)) ;; ignores changes to `bar` and `baz`

^:memo and ^:callback metadata should be usable in let bindings:

(defnc my-component
  [{:keys [value]}]
  (let [calculated ^:memo (+ value 10)
        on-click ^:callback #(js/alert calculated)]
    ^:memo (d/button {:on-click on-click} "Click me!")))

^:memo and ^:callback should allow enforcement of the Rules of Hooks checks that are currently behind an experimental feature flag.

[rome-user]

Is there something missing in the latest version of Helix? I know that defnc exposes ^:memo and ^:callback as metadata optimizations. I'm not sure about defhook.

[lilactown]

Right now, defnc implements this behind a feature flag you may enable. defhook does not yet support it.

I haven't fully tested it yet in production, which is why it's still behind a feature flag. In general I'm still a little unsure about using metadata to manage these type of semantics. I also want to ensure that it will emit compile warnings when breaking the rules of hooks.