React Security, Scalability, Maintenance & Performance

Introduction

Every time CTOs, lead developers and managers choose UI libraries for their projects they expect some key benefits:

• ease of use
• scalability
• easy maintenance
• shallow learning curve
• great performance
• security

This, and many more is exactly what you get from React.

Let’s explore how.

Modularity and reusability

A fair share of professionals have had their first contact with React thanks to a memorable talk by Pete Hunt, ex-core React contributor, called “Rethinking best practices”.

One of Hunt’s most memorable quotes states:

<blockquote><p>The framework cannot know how to separate concerns for you. It should only provide powerful, expressive tools for the user to do it correctly</p><p>– Pete Hunt, ex-core React contributor</p></blockquote>

Many businesses come to the conclusion that back-end patterns like MVC don’t work well on the front-end side. These patterns divide the responsibilities, but not in the most practical way.

That’s why React is offering a different approach — you won’t see models or controllers here. React is just about the views and does not divide responsibilities. It provides powerful tools for teams that allow them to do it the way they see it fitting.

Primary building blocks = React Components

Creators of React made the React components primary building blocks and a primary way to reuse the code in applications.

The responsibilities are segregated by components seen on the screen, not technologies like HTML, CSS, and JavaScript.

React suggests that the things that change together should be kept together. Markup, data, logic, and sometimes styles are usually kept together in one file because they change together.

The markup itself is not just HTML, but JSX, the syntactic sugar built on top of React’s API, that greatly enhances the HTML and lets developers use JavaScript instead of another templating language.

What’s amazing is that React components make it possible to divide responsibilities based on what is seen on the screen.

<span class="colorbox1" fs-test-element="box1"><p>Key take-away: React components keep together the things that change together (e.g. markup, data, logic).</p></span>

In React applications, if you see a User Profile “component” on the screen, you can expect you’ll find a corresponding UserProfileComponent.js and all the information you need to know about it in the codebase. Keeping related things together helps to achieve high cohesion of components.

It’s also easier to reason about the application structure if you think about it this way.

Another useful quality of React components is the clearly defined interface.

All React components:

• own their own state,
• accept data and state from other components in props or context,
• pass data and state down by using other component’s props,
• pass data and state up by using event handlers.

Those four will help achieve a low coupling between components — another software quality both businesses and developers desire because it makes writing new code and refactoring much easier. The clear interface allows developers to spend more time delivering features instead of figuring out the components’ implementation details.

Secondary building blocks of React

Regardless of the UI technology you choose, developers might need to keep some part of the logic separate to reuse it. This is where React introduces secondary building blocks and other ways to reuse the code.

In React, developers can use higher-order components (HoC), hooks, render props, or context to move the generic or reusable parts of the code to a separate place.

For example, HoC works well with things like an app-wide logger, Google Maps API integration can be implemented as a hook or render prop, and a global state needed to be shared across different components can be moved to a global context value.

In a traditional (MVC) framework, this logic would be extracted to some generic helper or service. In React there are specific tools to do that.

<span class="colorbox1" fs-test-element="box1"><p>Key take-away: higher-order components (HoC), hooks, render props, and context can be used to move generic or reusable parts of the code to a separate place.</p></span>

Scalability and maintenance

At Brainhub, we consider frameworks and libraries as tools we can use to solve business problems. It’s the same case with React.

One of the most important aspects for many businesses is scalability and maintainability.

Here we are thinking about things like:

• ease of adding new code, changing the old one, and fixing bugs,
• how easy it is to add new people to the project (even if they don’t know React),
• and finally, if React is suitable for big and complex applications.

The last question is the easiest to answer. We have many examples of big applications that use React and do just well — Facebook, Instagram, or Netflix.

In one of the podcasts, Dan Abramov, the creator of a state management library called Redux, mentioned that they have around 90,000 components in production at Facebook. It was a few years ago, so it might be more by now. 

When it comes to scalability and maintainability of the code, primary and secondary building blocks are things you can rely on.

It’s extremely easy to extract new components or merge a few components into one. Many component patterns help with refactoring when the structure of an app is changing.

By definition React is modular, so it’s not a problem to extract a separate module in the application and delegate the workload to new coworkers or even a separate team.

<span class="colorbox1" fs-test-element="box1"><p>Key take-away: large companies such as Facebook and Netflix have been using React with success primary thanks to its scalable modular architecture. </p></span>

Thanks to the modular nature it’s also easy to extract the common part of the application that can be reused in different parts of the product or migrated to other applications in the project if necessary.

High cohesion, low coupling, and components reusability seem like a good thing for the programmers, but it’s important from the business standpoint — those features allow us to make changes quickly and in the right place.

React learning curve

We’ve already mentioned it’s fairly easy to add new people to the project. But what about people that don’t know React yet and need to learn it?

Again, in React, developers code what they see on the screen. If they see two components in different parts of the screen and they communicate by sharing data, it’s certain there is some shared state in the code. It can be easily tracked in the code by looking at the implementation of one of those components, and most of the time, it doesn’t matter which one.

The only requirement is to understand how data flows in React applications and how the state synchronization works. 

The shape of a React learning curve really depends on how well developers understand these basic concepts. Those are the things people should focus on when learning React.

A great place to start for beginners is to watch the first React presentations from 2013-2014. They are available here.

Understanding those basic concepts makes it easy to understand all React features. They all depend on the same principles of data flow and UI/state synchronization. React is very coherent in that regard.

In our experience, it’s fairly easy for new team members to grasp React if there is at least one person that already knows it and used it before.

We’ve seen back-end and database developers coding React components and doing it the right way after a few learning days. One reason for that is mentorship. The other, equally important, is the fact that React won’t let the developer write bad code.

Programmers need to adhere to the basic principles of the one-way data flow and explicit state updates. Those are the building blocks that prevent developers from writing bad (or just messy) code, and the application will not work if they don’t adhere to them.

This is a good thing for beginners. By knowing just the basics, they will understand what happens in the code and they will be able to change it.

<span class="colorbox1" fs-test-element="box1"><p>Key take-away: React learning curve really depends on how well developers understand its state synchronization and data flows, which are fairly easy to grasp.</p></span>

React performance

Thanks to Virtual DOM React is very fast by default.

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. You can learn more about virtual DOM here.

We think the most important part is the ability to quickly improve performance when (and if) we need it.

Different ways to improve React apps performance

Improving performance in React boils down to avoiding unnecessary component re-renders.

React ecosystem provides many techniques and tools, both built-in and 3rd party, that let us do it.

To observe unnecessary components and state updates developers can use React DevTools or React Profiler.

Developers can apply memoization using React.memo, useMemo, pure components, or life-cycle method shouldComponentUpdate.

Thanks to hooks, side-effects can be skipped.

Code splitting can be applied using dynamic imports and Webpack.

The first render can be optimized by using Server-side Rendering. The benefit is a better user experience and improved SEO because the content is rendered faster than it would be with a client-side rendered application.

<blockquote><p>In recent years, companies like Walmart and Airbnb have adopted SSR to deliver performant user experiences with React. However, rendering a large data-intensive application on the server can quickly become a performance bottleneck.</p><p>– Codementor</p></blockquote>

If that’s not enough, developers can look for third-party libraries that will help with the optimizations even more. One of the most popular is Reselect for memoization or Immer/Immutable.js for immutable data structures that help limit the number of rerenders.

Keep React app up to date

It’s also worth taking care of updating React on a regular basis to get new features that optimize performance like React Fiber.

Fiber is the new reconciliation engine in React 16. Its main goal is to enable incremental rendering of the Virtual DOM. It helps with achieving higher performance, especially when rendering graphics and animations.

You can read more about it here and here.

React security

Last but not least is React security and the library has got you covered.

Thanks to Virtual DOM and underlying APIs like createElement() React is pretty good at automatic detection of injection attacks.

And since JSX is syntactic sugar over createElement() calls, it’s power can be leveraged to secure the application via its auto-escaping functionality.

To quote the documentation:

<blockquote><p>By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.</p><p>– createElement() documentation</p></blockquote>

Is React the right solution for your app?

React is a perfect choice if you expect project maintainability and scalability. It’s all thanks to powerful tools and its ecosystem that let teams organize applications in the correct way.

A big benefit is that you can start small and add additional, more powerful tools when you need them.

This is also a good strategy for learning React for new developers — let them start small by learning the basics and soon they’ll have no trouble using the most useful patterns. Modularity is a core factor that makes React apps easy to reason about.

Understanding the philosophy of the library and basic building blocks will help teams with improving the rendering of components when needed. Most of the time it won’t be necessary, because React offers great performance and security out of the box.

<span class="colorbox1" fs-test-element="box1"><h3>React’s security, scalability, and maintenance in a nutshell</h3><ol><li>React is great at automatic detection of injection attacks thanks to Virtual DOM and APIs like createElement(). Additionally, React apps can be secured via auto-escaping functionality.</li><li>React apps are easy to scale thanks to modular nature — components are easy to extract, merge, and reuse.</li><li>React’s modular architecture simplifies its maintenance.</li><li>React’s concepts are relatively easy to understand so the development team can be modified and extended without extra costs.</li><li>Thanks to Virtual DOM React apps are very fast by default. In complex apps, additional tools and techniques (e.g. memoization, code splitting) can be used to avoid unnecessary re-renders.</li></ol></span>