Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mattly opened this issue Feb 11, 2019 · 4 comments
Closed

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

mattly opened this issue Feb 11, 2019 · 4 comments
Labels
enhancement New feature or request

Comments

@mattly
Copy link
Contributor

mattly commented Feb 11, 2019

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
Copy link
Collaborator

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 Helper for HoC #9

@lilactown lilactown added the enhancement New feature or request label Feb 13, 2019
@orestis
Copy link
Member

orestis commented Mar 10, 2019

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
Copy link
Member

orestis commented Mar 19, 2019

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
Copy link
Collaborator

lilactown commented Mar 26, 2019

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"])

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants