I’m going to be using the terms library and framework interchangeably to refer to React in this article—whether React is a ‘lightweight framework’ or a ‘heavyweight library’ (or god forbid, a ‘lightweight library’) seems to vary from developer to developer. ‘Framework’ has never been very well-defined to begin with, and React lives somewhere in the fuzzy space between the two terms.
First, we need to understand what React is for. It was designed with one very specific goal in mind, and that goal governs everything about how it works. The short version is this:
Are you building a UI? Does that UI require a lot of JS interwoven with HTML and CSS? If you answered yes, then React is your weapon of choice. It’s good for both developers and business owners, so let’s break down what both camps get out of it:
I’m a developer!
One of React’s major calling cards is its Component system. A component is a module-esque piece of code that takes in props and puts out your declared interface. Components are simple, reusable, and save you a huge amount of time.
Standard browser DOM manipulation is fairly slow because, well, stuff is changing and that takes work. The Virtual DOM is a representation of the actual DOM. Whenever there’s a state change in the UI, React updates the Virtual DOM first. It then compares the Virtual DOM with the browser DOM and only changes the components which have been modified.
All of this is abstracted a lot by React—all you need to do as a developer is update the component, and it will sort out the details. Compared to direct DOM manipulation, this saves a huge amount of time and processing power.
React allows for server-side rendering using Node, which can be a powerful SEO tool in the right hands—it’s the only way to fully ensure that crawlers are going to the places you want them to. React isn’t the only thing capable of this (Vue is arguably better at it), but it’s a really nice feature to have.
EASY BUG SQUASHING
The React dev tools combined with the componentDidCatch method make error identification and isolation a breeze. I used to work a lot with AngularJS and often found it a pain to debug, but React is remarkably straightforward.
DITCH THE WRAPPERS
React 16 onwards lets you render fragment components in parallel, without needing a wrapper. Calling this will return an array. This means less divs and less DOM nodes, which creates cleaner, faster code. It’s not a huge change on its own, but combine it with the virtual DOM and you can get a huge performance boost while changing almost nothing on the surface.
I’m a business owner!
CHEAP AND EASY MIGRATION
One of the biggest issues with any new technology is the cost and effort required to migrate. React is a very light framework (to the extent that calling it a framework is controversial), and requires a lot less work from your developers to migrate to from standard JS.
EASY TO LEARN
React has a small API and a straightforward declarative syntax that will be relatively simple for your teams to learn and implement. Training up older staff and onboarding new staff will be a lot less painful with React than with a lot of competing frameworks.
React is maintained by Facebook—it has a large, experienced, professional team and a lot of capital backing it up. React is going to have a long shelf life, and will have continued support, updates, and patching on a level that’s harder for frameworks from smaller companies to match. Like any popular tech, it has a large community and easily-accessible answers—if your team run into a problem, you can almost guarantee that others have run into it before and have a solution somewhere online.
React isn’t a panacea; outside of UI design, it’s perfectly functional, but there are better niche tools for specific niches.
If you’re doing maintenance work for older sites or just like working with more seasoned tools, you might be looking for jQuery vs AngularJS. Maybe you’re looking to bring on a team, in which case there’s plenty of seasoned React.js developers for hire, if you know where to look.