Don’t Miss These Enticing Ways to Improve React App Performance

Lazy loadingzzz and sluggish performances are one of the major turn-offs for an end user. However, there is nothing new when it comes to the performance issue of a website. Whether you are a techie or not, everyone knows noticeable performance lag is unacceptable.

React has been around for a while; I still remember the time when it made its entrance onto the web’s stage. Several agencies were found pumping their custom CMS platforms and boasting a variety of new features for each new engagement but React strived hard to gain the top spot. Of course, I love React. Look at its declarative, top-down approach, and compare it with any other JavaScript framework. In addition to this, performance is one such place where the platform works wonders, and that’s where we are going to focus.

Learn the basics

Have you ever come across the term DOM? For those who haven’t, DOM constructs a tree of objects and nodes. Sooner or later, HTML elements become nodes in the DOM. Basically, it defines how to get, change, add, or delete HTML elements. But that doesn’t mean DOM doesn’t require any updation. It has to go through a Reflow/Layout stage, and the DOM nodes need to be repainted, which is slow. Fortunately, with the help of React, you can make use of different strategies to update your DOM. This is what we call as Reconciliation. Do you know what the best part of DOM is? It updates only the parts that need to be updated.

How to Speed Up Your React Application?

Let’s get acquainted with some of the useful techniques you can use to improve your React code.

Immutable Data Structures

Many of you have this misconception that data immutability is mainly about architecture or design pattern. Well, the fact is it’s an opinionated way of writing code. React app developers are forced to think about how you structure your application data flow. I personally find data immutability, a rare practice that revolves around a strict unidirectional data flow.



Its key benefits include:

Zero side-effects

Zero side-effects Simpler to create, test and use

Simpler to create, test and use Prevents temporal coupling

Prevents temporal coupling Changes can be tracked easily

In React realm, the notion of Component is highly recommended to maintain the internal state of components and changes to such a state that might cause the component to re-render. Additional tip- It is very important to treat React as immutable. Avoid mutate this.state directly, as calling setState() afterward may replace the mutation you made. Also, don’t forget to use the callback function of setState to run code after the call is completed.

Function/Stateless Components and React.PureComponent

Providing two different ways of optimizing react apps at the component level, both of these components turn out important. Function components are the ones that prevent constructing class instances while reducing the overall bundle size as it minifies better than classes. Whereas on the other hand, React.PureComponent compares values when looking at primitive data types, and compares references for objects.



Also, just make sure all child components of React.PureComponent are Pure or functional component.

Multiple Chunk Files

Any React application would begin with a few components. Adding new features and dependencies is the next step. And before you realize, you end up with a huge production file. So what can be done? You can think of having two separate your vendor, or third party library code from your existing application code by taking advantage of CommonsChunkPlugin for webpack. In addition to this, you can also think of splitting your files so that existing browser catches less frequently and parallel downloads resources to reduce load time wait.

Production Mode Flag In Webpack

Are you about to use webpack 4 as a module bundler for your app? If yes, you can think of consider setting the mode option to production. This basically tells webpack to use built-in optimization:



Although, doing this will limit minification or removing development-only code, to libraries and such optimizations but it will not expose source code, file paths, etc.

Dependency optimization

When optimizing the application bundle

Avoid Additional HTML Element Wrappers

Time has come when you no longer need to add an extra node when it comes to grouping a list of children.

Avoid Inline Function Definition

We all know functions represent objects in JavaScript ({} !== {}). No matter what, the inline function will always fail the prop diff when React does a diff check. In fact, an arrow function will create a new instance of the function on each render if it's used in a JSX property.

Get rid of Index as Key for map

Indexes are often being used as a key when rendering a list. {

Do you remember how the key is being used to identify DOM elements similarly it can be used to index or show your app incorrect data. If the key is the same as before especially when you push or remove an item from the list, React assumes that the DOM element represents the same component.

Conclusion

I hope the following post can help you in improving performance and avoid pitfalls encountered in a React app. By using shouldComponentUpdate wisely, controlling the changes you do to the DOM, and putting your callbacks on delay with debounce/throttle, you can improve your app’s performance significantly.