Abstraction Madness

I have noticed a trend that is hard to ignore about front-end development. This trend is about complexity and layers of abstraction that are being added to the technology stack.

HTMX vs RSC components

The meme above is a representation of the complexity that is being added to the front-end development stack. It shows a comparison between HTMX and React components. HTMX is a library that allows you to add dynamic behavior to your HTML using attributes. Even though I don’t like HTMX and never want to use it, I think it is a good representation of how simple things can be. On the other hand, even React itself is so complex right now.

My Journey

At 2021, Like many frontend developers in the SPA era, I took my next step with React after completing HTML, CSS, and JS courses. Hooks were hot. useEffect for fetch calls, useCallback, useMemo, and React.memo to prevent rerenders. After a while, I realized the noise-to-signal ratio in the component’s code has increased significantly. For every 10 lines of actual component logic, I had to write an additional 10 lines for memoization to prevent React performance issues. Later, Redux for global state, TanStack Query for fetch calls, react-hook-form for forms, React DnD for drag and drop, etc…

Now RSC (React Server Components) are the new cool thing. Another abstraction to learn, master and discover the best practices. For complete beginners this is a lifesaver. They can build a full-stack app without learning a new language or framework. But for experienced developers, it is just another layer of abstraction that makes the codebase harder to maintain.

When to use RSC?

If you are a solo developer
If you really want to prototype fast
If your application is not that complex
If your app is not client based

Please try to choose your techstack wisely. Don’t add unnecessary complexity to your project. Keep it simple and maintainable. Sometimes full-stack Next.js project is better than a SPA React project, sometimes not. You can’t know until you try.