react

"mulling over state management stuff"
ordnungswidrig 2020-06-29T13:35:47.415400Z

Is there a write-up anywhere on the challenges of react using identity for comparison and clojurescript using equality? I’ve tried different libraties and wrappers over hooks the other day and I’m still confused if this is something that could be “fixed” on the clojurescript (macro) side of things. Right now good old reagent seems more accessible to me.

lilactown 2020-06-29T16:36:41.415600Z

I have opinions

lilactown 2020-06-29T16:36:44.415800Z

https://lilac.town/writing/when-is-immutability-fast/

dominicm 2020-06-29T16:37:37.416400Z

I'm gonna subscribe to your blog :p

lilactown 2020-06-29T16:37:44.416700Z

lol

lilactown 2020-06-29T16:37:57.417100Z

I was wondering the other day if I have an RSS feed setup or not

lilactown 2020-06-29T16:39:48.417800Z

FWIW my blog is not always great, I am trying to get better at writing

lilactown 2020-06-29T16:41:00.419Z

@ordnungswidrig I think the answer is that in the majority of cases, you actually do want to use identity for comparison. If your team is struggling with this, it means that you might need to slightly rethink the way you are programming your app.

dominicm 2020-06-29T16:41:05.419100Z

my blog is empty, because I'm terrible at writing :)

dominicm 2020-06-29T16:41:40.419500Z

One problem with hooks is that deep equality becomes useful when you've got use-effect in play

lilactown 2020-06-29T16:42:43.420Z

in some specific way, or do you mean just that it would be nice to have deep equality for deps comparison?

lilactown 2020-06-29T16:49:31.420900Z

most of the time, when I think I need deep equality it can actually be solved by lifting the data outside of a component's render fn, or by memoizing a calculation

lilactown 2020-06-29T16:50:50.422100Z

the times that I haven't been able to solve this were worst case situations: deserializing data from some external source, e.g. a fetch payload

lilactown 2020-06-29T16:51:54.422900Z

in that instance, deep equality is both necessary and also terrible. I wrote a custom hook that covered this and gave it a really long name use-stable-identity

ordnungswidrig 2020-06-29T17:14:58.426100Z

I wonder why in ClojureScript "default equality" (`=`) should be worse than identity. Coming from reagent with a global atom and cursors etc. I'm just used that it short circuits on equality.

ordnungswidrig 2020-06-29T17:15:08.426500Z

Maybe I'm simply doing it wrong :-)

ordnungswidrig 2020-06-29T17:15:32.427100Z

(but I'm also a fan of hiccup 😛 )

lilactown 2020-06-29T17:17:12.428Z

= can potentially do a traversal of the entire structure you're passing in to determine whether the two data structures are equal, which is why it can be slower

lilactown 2020-06-29T17:18:51.429200Z

maybe I'm making a mountain out of a mole hill, but IME fixing this for 80% of the cases requires a slight restructuring of my code that ends up being faster. it is a change if you're coming from reagent, because now you do need to think about identity of your data structures

lilactown 2020-06-29T17:19:25.429800Z

maybe that's fundamentally an antipattern? I haven't determined yet

lilactown 2020-06-29T17:21:37.430200Z

helix does try to make this easier for you by providing easy syntax for optimizations

lilactown 2020-06-29T17:25:00.433800Z

e.g.:

(defnc my-component [{:keys [value]}]
  (let [data {:foo value}]
    (hooks/use-effect
     [data]
     (js/alert "data changed!"))
    ,,,))
the above will alert every successful render because data gets created every render. with helix, you can easily annotate the data with a memo optimization which will fix this:
(defnc my-component [{:keys [value]}]
  (let [data ^:memo {:foo value}]
    ,,,))
helix will emit a call to helix.hooks/use-memo and use inference based on the local context to fill in value as a dependency, so that it re-computes the value when value changes

lilactown 2020-06-29T17:25:52.434400Z

my goal is to turn on the easy syntax for optimizations by default in a release this week. I have the week off so gonna be doing some OSS stuff

dominicm 2020-06-29T18:33:31.435200Z

@lilactown it was because of the serialization that I had the problem, yep.

ordnungswidrig 2020-06-29T18:33:32.435300Z

I like that.

dominicm 2020-06-29T18:35:18.436900Z

In some projects, most of your state is serialized.

ordnungswidrig 2020-06-29T18:35:23.437Z

@lilactown I like hx and I tried helix, I need to understand this better.

ordnungswidrig 2020-06-29T18:37:18.438800Z

I read your concerns about hiccup but using ($ some-component {,,,}) instead of [some-component {,,,}] feels like a step back, even compared to JSX.

dominicm 2020-06-29T19:56:51.440200Z

The performance cost is significant though. In a UI you've got a really small performance budget.

dominicm 2020-06-29T19:57:43.441500Z

If we are really just discussing syntax, try the hx factory mode. It gives you something equally short to the hiccup syntax.

ordnungswidrig 2020-06-29T20:09:06.442400Z

What about #uix? It claims only a small performance penalty for hiccup like syntax.

dominicm 2020-06-29T20:31:30.443Z

It'd be interesting to try that on the react benchmarks helix is part of.

ordnungswidrig 2020-06-29T21:09:33.443300Z

@dominicm is that a collection of react wrappers competing?

lilactown 2020-06-29T21:20:31.444700Z

I saw today that @roman01la forked sablono and has made some improvements to the inference and performance

lilactown 2020-06-29T21:21:37.446100Z

It’s interesting.

lilactown 2020-06-29T21:23:32.448600Z

I’m just sort of sensitive to “good enough” solutions at the level we sit as wrapper authors, since React itself is a “good enough” solution wrt performance already

lilactown 2020-06-29T21:24:09.449600Z

And app authors are the ones that suffer from whatever performance tax we impose within our wrapper libs

2020-06-29T23:04:53.453100Z

👋 Sablono fork was mostly done to solve existing issues with input fields in Rum and unblock Rum from waiting for Sablono to fix its issues. But in general I'll put some time into the library to try to align interpreter perf with uix.

👋 2
ordnungswidrig 2020-06-30T08:51:05.462200Z

which fork is this? I think the clojurescript react-wrapper and hiccup landscape is getting a little confusig 😛

2020-06-30T09:55:53.462400Z

it's now in Rum's repo under the name daiquiri https://github.com/tonsky/rum/tree/gh-pages/src/daiquiri

2020-06-29T23:06:16.454600Z

On the other hand, when most of the Hiccup is compiled into react calls, there's not much left for interpretation, unlike in uix, where compilation is optional.

2020-06-29T23:06:34.455100Z

(didn't know this channel exists :) )

lilactown 2020-06-29T23:16:43.456600Z

yeah, I am very interested in hiccup that can compile into forms w/ essentially zero cost compared to equivalent JSX

lilactown 2020-06-29T23:18:54.458600Z

my efforts so far haven't yielded anything more ergonomic than explicitly calling a macro constructor or using factories, which is why I've eschewed recommending or adopting it as a default

lilactown 2020-06-29T23:19:35.459200Z

I'm still hoping that someone else will get it there 😄