React is not the new JQuery

Photo by Mike Marquez on Unsplash

I was having a quiet Saturday afternoon when I came across this post: React is the New JQuery. I felt there were quite a few misunderstandings and thought to try to address some of the points raised.

I feel that discussing tools in terms of hotness is counter-productive. Each tool is developed as a response to improved understanding of common problems. As we solve one issue, new ones arise which in turn require new tools. The tools themselves do not cause complexity, they are a response to the more sophisticated work we try to produce.

The purpose of JQuery was largely around providing a uniform way to deal with cross-browser issues and provide powerful DOM manipulation tools. The approach was based on a server generating HTML and then JS being loaded on the front-end to handle user interaction. You could create toggles or any components to augment default browser functionality. The problem with that approach is that your UI ends up being implemented across the client and the server. More often than not, that means we need two developers to implement a feature in two places. That takes more time, more communication and more likely to result in bugs.

Rather than thinking of React as a way to implement components, think of React as the UI itself. We can compose it from re-usable components we create as we go along. We can run our code the same way on the server as we can on the client. That means we can now implement our entire UI in a single language. Not only does that save us a considerable amount of time, but now we no longer need to worry about bugs arising from having a single feature implemented in two places. Any updates can now be made quickly by one person.

React and Redux also come with some interesting ideas such as the UI being a function of application state. We no longer store app state in the DOM as we would would with JQuery, the flow of state is now reversed. State can live in a store and all components have to do is re-render every time state updates. While it does take a while to get your head around this concept, once you do, your code becomes much easier to reason about.

To address some of the points about React features

Rewrite your markup as JSX. Be sure to replace class with className or the whole thing will blow up.

The reason for that is that JSX is a JS representation of the DOM segment our component is outputting. We can’t use class because it is a reserved keyword in JavaScript used to declare ES6 classes. className is not a bad alternative since that is the property name DOM elements use to refer to the class attribute.

Inline an onClick attribute attached to your JSX that maps to a function to handle the click.

While event handlers look like they get inlined, this is only the syntax used for their declaration. They are actually implemented using delegation whereby React applies one single event listener at the root of the app to handle all events. As a result our application will still be efficient and performant with a large number of event listeners.

One similarity that React does have with JQuery is that they both ensure events behave the same way across all browsers which helps to make our lives a little easier.

Add this.handleClick = this.handleClick.bind(this); to the constructor in order to get things to work.

Context dereferencing is a tricky topic and can trip up even experienced developers. One way to get around this issue in React is to use use arrow functions as discussed at https://github.com/facebook/react/issues/9851.

It may just be me, but this feels comparatively way more complicated and inelegant.

It’s a different approach. It will be better in many cases, but not all. While it may look like it introduces complexity into our application, in my opinion it actually helps us handle complexity that exists in large applications. I’ve worked on React apps with over 100k lines of code and at every step having React was a huge help and an asset. Some of the projects would have been very difficult to build in any other way.

React can be challenging as it involves not only a different way of thinking but also requires strong understanding of JavaScript fundamentals. If you are interested, I run a JavaScript bootcamp in London that covers exactly this material. We still have a few places left on our September cohort and would love to help you grock React as well as all the supporting technologies.