nosco / hx

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

should provide sugar for using React/memo with defnc #18

Closed mattly closed 5 years ago

mattly commented 5 years ago

I get that you're trying to provide a "close to the (mental) metal" wrapper around React, but one of the nice things about working in clojure and with clojure data structures with React is that we can take advantage of their immutability to control re-rendering, as with rum's rum/static mixin for shouldComponentUpdate. The functional component equivalent of this is React.memo, a higher-order component for wrapping functional components to only re-render them when the arguments pass a shallow equality test, which I think will suit the nature of working with react from clojure.

I don't know what you'd consider this to look like, perhaps defncs or maybe defstatic, but it would be nice to not have to do this wrapping manually.

lilactown commented 5 years ago

I think there are two things we could do:

  1. Provide a fnc that allows us to create anonymous functional components with all the same sugar.

  2. Implement https://github.com/Lokeh/hx/issues/9

orestis commented 5 years ago

OTOH, perhaps React/memo is both trivial and special enough that adding that as a space option to defnc makes sense? Let me know if you'd like a PR that explores this.

orestis commented 5 years ago

Since we discussed quite a lot about Clojure vs Javascript equality in the useState/useEffect discussion, I was happy to find that it seems that React/memo allows the use of a custom compare function. Still need to try it out to see how it works.

lilactown commented 5 years ago

I implemented #9 in 0.4.0 (current master).

You can now do:

(defnc MyComponent [_]
  {:wrap [react/memo]}
  [:div "foo"])

To wrap the component in the React.memo HoC.

If you want to pass in a custom comparator:

(defnc MyComponent [_]
  {:wrap [(react/memo =)]}
  [:div "foo"])