This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-04-09
Channels
- # announcements (3)
- # babashka (1)
- # beginners (66)
- # clj-kondo (2)
- # cljdoc (46)
- # cljs-dev (7)
- # clojure (16)
- # clojure-australia (2)
- # clojure-china (1)
- # clojure-europe (3)
- # clojure-hk (1)
- # clojure-japan (1)
- # clojure-korea (1)
- # clojure-my (1)
- # clojure-sg (1)
- # clojure-taiwan (1)
- # clojurescript (4)
- # community-development (53)
- # conjure (6)
- # css (7)
- # cursive (6)
- # datascript (1)
- # datomic (5)
- # exercism (5)
- # graalvm (12)
- # helix (8)
- # jobs-rus (1)
- # kaocha (1)
- # lsp (19)
- # nrepl (1)
- # overtone (2)
- # pedestal (1)
- # polylith (2)
- # portal (2)
- # react (25)
- # reagent (1)
- # shadow-cljs (7)
- # spacemacs (8)
- # vim (9)
Hey, React 18 was announced with the first stable support for Concurrent rendering. Our app was stuck still at 16.8 but 17 looks like an easy move. I'm updating reseda to use the new useSyncExternalStore hook which is backwards compatible.
i spent a sprint trying to upgrade and decided to put it off. they changed the way events bubble which breaks some of our most complex code
I've created a PR for reseda that updates the internals to use React 18: https://github.com/orestis/reseda/pull/14 -- the public API remains the same which is a great relief. I will try to see if I can get it to work with both React 17 and 18. Shame that package.json can't easily allow me to test with both. (I wish I had an alias like in clj).
Regarding useTransition, the great big caveat is that it doesn't work with "external stores" (like Redux, Reseda, et al). You can use useDeferredValue
to get the same effect. I have added demos in Reseda that show the differences: https://deploy-preview-14--heuristic-jones-e1e7ad.netlify.app
That is to say, you can still wrap a "dispatch" or whatever it's called (in reseda, just a swap!
in a startTransition
but it will be still be considered "sync" or "urgent" - and in particular, you will get suspense fallbacks replacing existing content which is very very annoying. Thankfully useDeferredValue
will turn the render into a non-urgent one and essentially you will re-render with an a previously resolved promise, meaning you won't get any fallbacks. It works nicely.
The Suspense stuff is apparently still brewing, but I hope that it won't be another 3.5 years until they release it 🙂
the streaming ssr stuff is the most interesting and most out of reach for me right now
does streaming ssr make this possible? i also imagine it would be limited to js/cljs, making it less useful for clj databases?
if one wrote a compatible library for clojure, you could define components in a CLJ(C) file that would talk to your database on the backend and stream the result to the React front end
not quite. the difference is streaming rendering sends HTML over the wire and only handles initial page load, whereas server components use a custom wire format and can be triggered at any point in the page's lifecycle
you can imagine 3 different protocols:
(defprotocol IRenderHtml
(-to-string [el sb])
(-to-stream [el s]))
(defprotocol IRenderServer
(-to-wire-format [el ctx]))
(defprotocol IRenderClient
(-to-fiber [el ctx]))
IRenderClient
is handled by React on the client and I don't want to rewrite it. the other two protocols though are used on the server and we'd have to reimplement them and the runtime engine in Clojure to use them
I've resigned to have to use node for any kind of SSR. A small experiment today shows that since useEffect doesn't run on the server, data fetching is still an issue that isn't solved by React 18. They say so themselves. Until then, the only thing that makes sense (for our app) is a UX improvement of getting to a “skeleton” page early.
But again, as far as I have understood, the wire format you talk about is still brewing, and not even available in React 18
on the server you don't fetch using useEffect, you suspend - just like on the client with React 18
IIUC streaming SSR allows you to render a suspense boundary and then stream the result later, but maybe I misunderstand