Hacker News new | ask | show | jobs
by mrj 1207 days ago
Same here, I have been spreading mobx everywhere I have gone. There's usually some resistance but once people got used to automatic dependency tracking, they never go back.

I've seen so many projects get bogged down in props hell, then gobs of context api and performance problems when too many things react at once.

Mobx has been solving these problems for a long time now!

1 comments

I recently started ripping Mobx out of my app. Mobx solved exactly 1 problem for me, which was passing data horizontally (to siblings/cousins) and even to non-React components.

But now `useSyncExternalStore` solves that. No context needed. Can read and write state anywhere, even outside components. No "observe" or "track" shenanigans. Efficient updates (can listen to a subsection of the tree).

valtio is a modern mobx-like implementation that uses `useSyncExternalStore` (via useSnapshot - https://valtio.pmnd.rs/docs/api/basic/useSnapshot).

Its still not quite as nice as MobX, as passing larger objects down the component tree means you need to mix snapshot and non-snapshot state. But it makes me hopeful about `useSyncExternalStore`

That appears to be in beta still? What store are you using with it?

I'll keep an eye on it! But mobx does more than that, like a lot of component optimizations and utilities. It's been so good for so long, I'm not in a rush to get rid of it.

`useSyncExternalStore` was shipped live in React 18.0 and is fully ready for production use.

Source: I'm the primary Redux maintainer, and worked with Andrew Clark of the React team to nail down the semantics and behavior needed by `useSyncExternalStore` in practice. They had the idea, but discussed a lot of the necessary use cases with us and other lib maintainers, and a lot of its internal implementation is directly related to how React-Redux's `useSelector` hook was implemented already.

I built the first working code that used it by prototyping React-Redux v8's switch from our own internal subscription handling to `useSyncExternalStore` instead and gave Andrew feedback:

- https://github.com/reduxjs/react-redux/pull/1808