Rethink React: Is it still a good library?
date
Sep 3, 2022
slug
rethink-react-is-it-still-a-good-library
status
Published
tags
React
Frontend
summary
About 4 years ago, I started to write React as my first choice in frontend development. However, time changes. Something better comes out already…
type
Post
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
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.