React Compiler Support

[sajanv88]

Hey there,

I'm currently utilizing the legend-state library in one of my React applications. Recently, I've delved into exploring the React compiler and have concerns about potential compatibility issues. I've heard that proxy-based React libraries, such as MobX, might not integrate smoothly with the React compiler. Consequently, I'm curious about the future compatibility of the legend-state library. Are there plans to support it?

[jmeistrich]

What have you heard about it not integrating well? I'm not aware of any reason it wouldn't work. While you're exploring the compiler are you seeing any issues?

[sajanv88]

Hi @jmeistrich,

I was watching this YouTube video and at the end, Jack Harrington mentioned that proxy-based state management doesn't work well, specifically referring to MobX. This made me wonder if the same applies to the legend-state library.

I tried out some legend-state examples with React 19 beta, and they seem to be working perfectly fine.

[jmeistrich]

I think he meant that the compiler won't optimize proxies in any special way, but it should still work fine? I'll play around with the compiler when I get a chance and see how it works.

[stephenh]

Interesting comment from Michel Westrate:

mobxjs/mobx#3874 (comment)

Which, if true (no reason to doubt it), it's crazy how much React is doubling down on immutability, vs. following the recent trend of "turns out signals are pretty great" that has been a pleasant change in the rest of the JS ecosystem lately. :-)

Given this behavior, I assume the Valtio approach of "immutable read snapshots" vs. "writable proxy stores" will be necessary (copy-on-write up the tree)...

That said, Valtio has several DX aspects I don't like (imo it over-emphasizes the snapshots-vs-store separation, i.e. in use cases like "for each child of the snapshot, render the child + allow the child component to mutate it self", you end up having to pass in both the child snap + child store anyway).

So my hope is that either mobx or legend can pull off making the signals/FRP mental model work in the new react compiler regime. :-) 🤞

[jmeistrich]

It works fine.

Sorry for not updating the discussion here, I answered this question on every other platform and forgot the Discussions tab 😂

As Michel said in that thread, it seems like the problem the compiler has with other proxy state libraries is that they read properties directly from objects, and the compiler memoizes objects expecting them to be immutable.

But since Legend-State uses get() rather than direct property access, the compiler doesn't memoize it because it's a function call, so there's no problem with the compiler.

[stephenh]

Ah wow, that's great!

You likely just got yourself a new user :-D (in time, we'll likely procrastinate for awhile before switching over).

Thanks!

[jmeistrich]

Legend-State works fine with the compiler. Since Legend-State uses get() to get values out of observables, the compiler doesn’t try to memoize it, so there’s no problem.

[jamieathans]

I notice in your X post here - https://x.com/jmeistrich/status/1794178546249945412 it states.

It seems like it's currently not running on observer components, but observers won't be improved a ton by compiling anyway.

I know with MobX the recommenation is to wrap every component with observer, is that not the case with Legend State as well?

[hitbear518]

seems when you use get() within a hook, and not with Component which using that hook, react compiler will make observer wrapper not working, the hook or rerender of Component will not be trigger with new value.