Hacker News Reader

Comment by slmjkdbtl | Hacker News Reader

I think the class era is a decent, normal, boring and useful UI framework, however hooks are very difficult to use:

- How things actually work are very hidden and unintuitive

- Very easy to make mistakes, easy to write low performance UI

- High cognitive load, constantly thinking about how many times things run, what's in dependency arrays, what should go in useCallbacks and useEffect etc

- Overused, part of community sometimes encourage people to use React and some dependencies that's unnecessary for the project, only adding overhead and complexity

- Easy to mix business logic with UI logic

View on HN

This is the whole thing right here in this comment.

I work with mobx at work which just does a better job of letting us focus on business logic. Components observe computed models directly, no prop drilling, no context. The `createTransformer` map function is the key to mapping dynamic collections to computed models, handles GC in cases where you want to go from computed model to another computed model so you don't manage a bunch of WeakMaps yourself.

The React maintainers and community buy into complexity too readily. Probably why SolidJS (which unlike mobx also provides the view layer) is gaining traction.

So glad to hear I'm not the only one doing this. I built and manage a very large and complex internal tool that we started building in 2019 before the full switch to functional components and Hooks happened. We use MobX and it has been great for us. Somewhat recently I was considering refactoring to use functional components just to be forward thinking. I was realizing that useEffect and other hooks could almost completely and entirely be avoided if you simply used MobX stores (like we already do), and local component scoped MobX stores where necessary. It keeps state management consistent throughout the app, and avoids the complexity of useEffect and other hooks. Like you said, components just observe. I started wondering why I didn't see this pattern more often out in the wild. It just seemed to be very straight forward.

What's surprising to me is that React 19 seems to be doubling down on hooks, adding more cognitive load by increasing the number of hooks you need to be aware of and their particular behaviors and requirements. Doing that instead of moving toward the more universal reactivity model that MobX, SolidJS and even frameworks like Svelte 5 are starting to adopt.

Yep. One thing I noticed that how intuitive it was to implement setInterval in class. However, in hooks, you probably need a guide for that.

https://overreacted.io/making-setinterval-declarative-with-r...

> easy to write low performance UI

I agree with this. Luckily there's some work being done on this - check out the new React Compiler[1]

> what's in dependency arrays, what should go in useCallbacks and useEffect

This lint plugin[2] from the react team helps quite a bit with this

[1] https://react.dev/learn/react-compiler [2] https://github.com/facebook/react/tree/main/packages/eslint-...

Reply on news.ycombinator.com