About 4 years ago, I started to write React as my first choice in frontend development. However, time changes. Something better comes out already…
In the beginning, I was a React lover because it was much more elegant than other frameworks/libraries at that time. Declarative UI (and JSX, a syntax sugar 🍬 for UI), Virtual DOM, and one-way data flow… those things are fascinating to me, also the ecosystem and community. However, I feel disappointed with it now.
below we will discuss two parts of React: "Performance" and "Stability".
Performance
Virtual DOM in React is a lie because runtime diffing really hurts performance.
The concept of how declarative UI works in React is powered by virtual DOM. It’s a plain object for storing something about rending (Idk its structure really looks like but I think it changes after React Fiber comes out) and React does "reconciliation" for synchronizing real DOM with it.
The official docs only show some points about how heuristic the process is. But for me, it really a black box because I never get into the source code. But it doesn’t matter. The problem isn’t about the algorithm behind it. It’s about why React does it in the runtime instead of build time (some frameworks already do that).
Stability
React is too REACTIVE.
Except for built-in reconciliation, React provides 2 ways to mitigate re-render.
- builtin hooks: useMemo, useCallback
- React.memo / shouldComponentUpdate
To be honest, it’s bad and costs a lot. If you want they don’t re-render, you need to wrap variables, functions, or components with one more function and make more diffing.
Not only make DX worse but also that comparison (diffing) makes your application slower 🐢.
I think the React team already notice the first problem and run the project: React Forget to rescue our DX. If you want to know more about this project, watch the playback of React Conf 2021: React without Memo - YouTube.
Conclusion
As I see it, the root cause of those problems is the philosophy of React. For example, one of the modern frontend frameworks, Svelte, gives a better solution:
No virtual DOM: compiling your code into tiny vanilla js
Reactive on your own: non-reactive by default and mark it if you want.
And I really fond of the concept: Don’t let everything be reactive.
Maybe React won’t change now, and I still need to use React at work. However, React 18 still impresses me with the new features like streaming SSR and selective hydration. I’m still waiting for React Forget and other new features to come out.
Give this post like 💖 and my blog a follow if you enjoyed this post and want to see more.
Top comments (1)
React is an amazing tool but however you need to learn a lot of javascript and then react deeper to avoid spaghetti code.