feat: add react-compiler

[stipsan]

Now that the React Compiler is in Beta, and fully supports targeting React 18 (and above), we can start leveraging it to boost the performance, and reduce the memory footpring, of our libraries 🎉

I've tested this build [email protected] on the Studio and tests are passing 🥳
It doesn't seem like the eFPS testing suite is setup to capture the performance benefits atm, compare a regular bump with this one and the differences are so small I think they're inconclusive.

It's really cool to look at how the compiler is optimizing the code, how granular it is.

For example it even hoists out inline functions when it can, like this:

-map((value) => ({ snapshot: value, error: void 0 }))
+map(_temp$1)
+function _temp$1(value) {
+  return {
+    snapshot: value,
+    error: void 0
+  };
+}
-catchError((error) => of({ snapshot: void 0, error }))
+catchError(_temp2)
+function _temp2(error) {
+  return of({
+    snapshot: void 0,
+    error
+  });
+}
-share({ resetOnRefCountZero: () => timer(0, asapScheduler) })
+share({resetOnRefCountZero: _temp4})
+function _temp4() {
+  return timer(0, asapScheduler);
+}

And finally, note how it removes the useMemo entirely, and replaces it with granular, low level API:

import {c} from 'react-compiler-runtime'

Which knows ahead of time exactly how much cache it'll need:

const $ = c(9)

And here's how that's used to ensure that cache.get(observable) is only called when observable has changed:

-const instance = cache.get(observable);
+let t0;
+$[0] !== observable ? (t0 = cache.get(observable), $[0] = observable, $[1] = t0) : t0 = $[1];
+const instance = t0;

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-rx	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 1:51pm

[socket-security]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@vitejs/[email protected]	Transitive: environment, filesystem, network, shell	+54	17.9 MB	vitebot
npm/[email protected]	Transitive: environment	+3	7.73 MB	react-bot
npm/[email protected]	None	0	72.2 kB	react-bot

View full report↗︎

[stipsan]

Only the subscribe argument in useSyncExternalStore needs to be memoized, as it'll run teardown + setup every time it changes. The getSnapshot and getServerSnapshot arguments don't have to be memoized and the React Compiler uses less memory if we only memoize subscribe 🙌

[stipsan]

This is ignored by semantic-release

[stipsan]

The guidance atm is to use exact versions, generated like:

pnpm add react-compiler-runtime@beta --save-exact

[stipsan]

19.0.0-0 is more permissive than 19.0.0-rc, and for example permits the canary versions of 19 that are used on canary builds of next.

[stipsan]

The rewrite to useCallback on just subscribe, instead of keeping the useMemo, is to avoid agressive subscribe + unsubscribe loops.

The Compiler looks at what is actually used inside the useMemo, which is instance.observable, instance.snapshot and instance.error.
In a sense, it's as if it rewrote our code to be:

const instance = useMemo(() => cache.get(observable), [observable])
const store = useMemo(() => {
  // ...
}, [instance.observable, instance.snapshot, instance.error])

This is causing store to change identity every time snapshot changes.

So by splitting them up, to use useCallback instead, this is what happens instead (conceptually):

const instance = useMemo(() => cache.get(observable), [observable])
const subscribe = useCallback(() => {
  // ...
}, [instance.observable])

And now we avoid the problem, as instance.observable is stable. useSyncExternalStore doesn't care if getSnapshot or getServerSnapshot changes identity between renders, it only requires subscribe to be memoized correctly.

[bjoerge]

Oh, this is great - thanks for the explainer!

[stipsan]

It's vital that the test suite is also using the react compiler, to ensure we're testing the behaviour of the code we're shipping, not the unoptimised code.
Especially since our testing suite is testing implementation details around memoization.

[bjoerge]

💯

[bjoerge]

Amazing stuff! LGTM ✨