Rethink React: Is it still a good library?

Photo by Joshua Aragon on Unsplash

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.

1. builtin hooks: useMemo, useCallback
2. 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:

1. No virtual DOM: compiling your code into tiny vanilla js
2. 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 claps 👏 and my blog a follow if you enjoyed this post and want to see more.