The new React Compiler presents problems for observable libraries, which tend to use an observer HOC to track changes. This observer will not work correctly with the new compiler.
MobX-State-Tree is exploring ways to make reactive updates remain granular, preserve the developer experience, and comply with the Rules of React through some custom hooks.
This demo repository is a Remix app with the React Compiler enabled for React 18.
Run the dev server:
npm install
npm run dev
localhost:5173 will show up and have two links: one for the useObservable hook, and one for the observer HOC. On either page, you should be able to click buttons to see changes (and see when certain state changes are ignored).
Then, open up React DevTools, and check to see when the React Compiler is working. You'll see the observer HOC is not memoized correctly, but the useObservable hook is.
The important code is in hooks/useObservable.ts.
This is essentially like a useSyncExternalStore hook, but it knows a little more about MobX-State-Tree, so it can provide granular updates to the UI, whereas useSyncExternalStore would re-render the component on every change, even for unrelated properties (you can observe this behavior in this CodeSandbox)
- Document
- Solicit more feedback and edge cases/corner cases
- More fixes
- Consider packaging it up with MobX-State-Tree