nosco / hx

A simple, easy to use library for React development in ClojureScript.
MIT License
247 stars 16 forks source link

Add deref-in hook #16

Closed pepe closed 5 years ago

pepe commented 5 years ago

A hook that returns value in the derefed atom on a path specified by the sequence of keys and rerenders the component, only if the value on key path changes. Any other change of the atom is ignored.

It is similar to cursor idea found in some other frameworks.

It is confirmed to work with funcool/potok state atom.

Also it is just proof of the idea, and I would appreciate any discussion.

lilactown commented 5 years ago

I like it!

Maybe we could appropriate something like the useLens Hook that was in the JUXT article that come out today:

(defn <-lens
  [a f]
  (let [[value update-value] (js/React.useState (f @a))]
    (js/React.useEffect
      (fn []
        (let [k (gensym "useLens")]
          (add-watch a k
                     (fn [_ _ _ new-state]
                       (update-value (f new-state))))
          (fn []
            (remove-watch a k)))))
    value))

We could maybe make f optional which would replace <-deref.

I'm going to sit on this for a bit and think about what's best to expose via hx and what should be left to some other library.

pepe commented 5 years ago

Thank you for the consideration of the approach. I am sure, you will sit out something nice :smile:

For inclusion in hx, I am actually bit more on the side of moving all the hooks to a separate lib: hx-hooks?.

The article is pure gold! I am playing with react-spring hooks and friends in hx and it is like best thing since I found cljs. I am starting with some project with hx right now and I really love how simple, yet powerful this approach is.

And as always, thank you very much for all the work.

pepe commented 5 years ago

After some more playing with the code, I definitely think <-lens approach is the best one. Imagine cooperation with specter for example.

pepe commented 5 years ago

So after some more tinkering, my heart is with the separate library for all hooks, so the core consists only of the component/parsing facilities.

Let’s call it hoox 😊

pepe commented 5 years ago

So I am closing this.