Sunrise in the fog

    Drawbacks of Using React

    Let me start this by saying that I've used frameworks like React and Vue, and do like them. I think they can make life a lot easier and help manage complex issues in simple and readable solutions. However, I also think it's easy to go overboard with them and use them when they aren't needed. 

    I'm going to use this site as an example. When I first built it as a SPA, I used React. It worked great, I enjoyed it, etc. However, the code base was pretty big. I'm not even just talking with Node modules and Wepback and everything, I'm talking just what I wrote. 

    I ended up rewriting the site without React and not using Webpack/NPM to process the JS. I just wrote my scripts as ES6 modules and then imported everything - same site, same everything - just to see what the difference would be in the payload size. Ready for it?

    With React, my script payload was 204KB. With my non-React solution, it was 30KB.

    That's a huge difference. I wrote less code and got the same result. Why? React has lost of extra code I didn't need - like component mounting, getting/setting props, etc. If you know React, you know how components work. And to be fair, all that stuff can be useful in a complex situation. But I've got a simple little blog - not a ground-breaking social media site. I don't need to create prop listeners and mounters and all that jazz for a menu that doesn't change after load. Also, Webpack bundling. Need I say more?

    Now, I will admit. I was doing some server side rendering (the header, footer, and the containers) and was only using JS for swapping out content, making the moving parts (like the meme modal, or the article pagination), and the pseudo routing. But don't think that's a bad thing. I think that helps show my point in that React can be overkill.

    Servers seem to do a bomb job at rendering content fast. And the content sent back wasn't more than the different in script sizes to make the network's job as difficult as before - the increase was ~68KB. So the update meant the network lost 106KB in its payload. I realize, that's not a whole lot in the grand scheme of things. But it's still enough to make a point. The content is rendered faster AND the payload is smaller. Double win.

    Again, having used React I can say frameworks like it can definitely be useful. They have their place, and I'm very glad I took the time to learn how they work. In a scenario where I'm creating an app or site where everything is changing or updating, React/Vue would keep my codebase cleaner and easier to understand. But not for a small project. They just didn't cut it.