The Dark Side of React

Front-end frameworks allow you to build the structure, design, behavior, and animation of all on-screen elements of websites and apps. They have become immensely popular with developers in recent years, partly due to JavaScript being a part of the core web technology, together with HTML and CSS.

The number of available frameworks are skyrocketing, including famous examples like Angular, Ember.js, Preact, Svelte, Vue.js, and, of course the most popular one, React. The advantages of a front-end framework like React are that many developers know it and that it is used by large organizations. The React universe is enormous, you have the core features plus a lot of elements and components you can put on top of it to create the user interfaces and UI components your organization requires.

So, what are the drawbacks?

No automatic success in a shifting landscape

While React helps solve many issues, it comes with its own set of challenges. Firstly, you will not automatically get good UX, fast websites, high Google ranking, and excellent time to interactive with React or any other JS front-end framework. Many operations need to be done on the client side, which again depends on what client users are sitting on and how fast it is.

Also: A lot of development is ongoing in the front-end universe, which leads to things changing fast and React being only one of many frameworks. This makes it somewhat hard to keep track of every obscure, but potentially app-breaking development that may occur.

Just a tool, not a unicorn

But the main challenge may be this: realizing that React & co. are only tools, and not magical unicorns. In essence, developers are only moving complexity into a new framework—which they in turn need to teach themselves. It takes a long time to become an expert—we have spoken with developers who have worked with React the last 2–3 years, and still haven’t learnt every nook and cranny of the framework.

If developers don’t teach themselves the most important features, they and their organizations will encounter a set of new, previously unknown problems in the long run. As mentioned, there are constantly a lot of changes in these kinds of frameworks, and backwards compatibility is not necessarily present.

Locking yourself into one way of solving problems

Another “dark side” of React or any other kind of framework you should consider is this: By using one exclusive front-end framework, you’re basically locking yourself into just one way to solve issues—instead of several.

With only one JS framework, your developers limit themselves to looking for packages in one universe, something which will not necessarily help your organization solve challenges in the way you require.

Security and ecosystem

As for security, the architecture of React is somewhat similar to WordPress—from one perspective. The security of WordPress somewhat depends on what you drag in—what plugins you decide to use. The same principle also goes for React in the form of modules.

In React, developers can insert a module, which has a dependency on scores of other modules, which again have dependencies on scores of even more modules—and so on. This ecosystem has both its strengths and weaknesses, but everybody should be aware of the potential caveats.

See also: Why go headless with a hybrid CMS?

How to solve SEO problems

Many of the challenges mentioned here are more of a heads up rather than an actual issue with your particular project. But some things tend to be more prevalent than others, namely SEO problems.

The answer lies in prerendering, or server-side rendering—a technique which involves employing scripts on a web server which then produce a response tailored for each user's request to the website. Server-side rendering provides a customized interface for the user, including SEO tactics.

An example of this is React4XP, which handles and renders pre-built React components in the digital platform Enonic XP. RubyGarage has a more in-depth article on React and SEO, so be sure to check it out.

Think about how you’re building your app

The most important tip about solving or preventing React or JS front-end framework woes is to think thoroughly through what your goal is, and then how your app should achieve that.

As an added note to this, ensure that the most important elements on your website or app are loaded first—the ones that are needed to create the site or app in the first place.