Automatic observer on a React tree

[sarimarton]

Hi,

I developed a library called react-beyond, which enables the application of a Higher-Order Component (HOC) not just to a single component, but recursively to all its descendant elements (and their descendants, and so on). This offers a significant ergonomic advantage in MobX, as it eliminates the need to wrap every component with observer. This requirement was a major deterrent for me in using MobX previously.

A demo is available on the landing page at https://react-beyond.github.io/#hoc. Here, you can see that the App component (and all its descendants in the tree) do not need individual wrapping, as they are under a <Beyond features={[hoc(observer)]}> component.

I wanted to let you guys know about its existence. If you find it useful, perhaps you could mention it in the relevant sections of the MobX guide. And of course any feedback is welcome.

cheers

[jamieathans]

I tried this and indeed it works as advertised with MobX - components would re-render without having to wrap them in observer.

Unfortunately, since I use NX with Webpack, Fast Refresh seems to break with this combination which is a deal breaker for me (and I'm sure many other).

[sarimarton]

@jamieathans Happy to see you tried it out. Indeed, fast refresh needs a bundler plugin, and there's no such for webpack. There is one for Vite though, which you probably read on the webpage. The reason I'm writing now is that I happened to be in a situation having webpack-based projects with Nx, and I considered writing the plugin for webpack. But ultimately, for a bunch of other reasons too, I ended up migrating away from webpack to Vite, which is a surprisingly simple process, because @nx/vite has all the support I needed, including the migration itself. (Well, almost, because there are no module federation generators in @nx/vite, but it's not a big deal writing it by hand, and they'll probably make it, as vite is overtaking the space from webpack nowadays)

[jamieathans]

@sarimarton I did try the Vite plugin as well (on a side project) and indeed fast refresh worked as advertised.
At work though (were I introduced MobX and NX into an existing code base), moving away from Webpack seems unlikely ...

[Aqours]

It looks pretty good. IMHP, adding HOC is very annoying and verbose.