Top 9: Best Optimization Techniques for React Apps

Most of the frontend developers have felt in love with the react native development because it streamlines the process of performing UI updates but still some of the react applications no matter the size can become laggy sometimes. Unfortunately, by adding a front end library like React do not improve the application performance instantly. For this, you must properly configure the React.

You can make substantial improvements to how fast your React app performs when you know how to effectively measure and optimize the application's components. In this article, we will see how to optimize React in addition to provide some JavaScript best practices for delivering more fluid user. Let us begin with some basic concept.

How do the React works?

React is the popular front-end JavaScript library that lets developers build and compare virtual DOMs - a feature that is common in other libraries like Vue.js. All the react apps have a root component which branches out in a tree-like formation that is responsible for rendering the UI.

After this, React records the track of user interactions and other requests for virtually re-rendering the UI. Hence, React reconciles the differences between the current UI and new one using a 'diffing' algorithm which allows making only the necessary changes according to what the user sees rather than reloading from scratch.

How to Optimize React?

Before making any changes to your application, you must perform some measurements. If you suspect that a small code is slowing down everything then you may become tempted to tackle it right away but by taking the advantage of the React performance measuring tools; it will help you quantify your progress to let you know where to focus your optimization efforts.

#1  Use Immutable Data Structures

If you want your React.PureComponents to check where the changes occur in complex stage automatically, then you must set up an immutable data structures by making copies of objects with data alterations rather than just directly changing objects. B doing so, you simplify the process of detecting the changes which can help you optimize the speed.

#2  Utilize React.PureComponents

All the components that contain only primitive data, you can perform the shallow comparison by making it a React.PureComponent that implements a function named shouldComponentUpdate() automatically. By using this, it can speed up React's re-rendering process by optimizing the regular components.

#3  Eliminate Unnecessary Source Code

React automatically warns developers when part of their code results in bugs and errors which can drag down the app performance. We have got a way around it. If you delve into React's source code catch the (process.env.NODE_ENV != 'production') line which is responsible to send those error warnings.

Be extra cautious when eliminating the source code as one minor code change can result in the while crash down of the app. If you are using create-react-app to develop your project, then simply run the given line to get the production build sans the extra code:

npm run build

#4  More use of Constant and Inline elements

The JSX elements are treated like values by the React Constant ELements and moving them to a higher scope by reducing calls to React.createClass. ALike this, React Inline Elements achieves the same goal by converting JSX elements into the object literals by returning them. Just configure your packahe.json file to set this up:

"babel": {
    "env": {
        "production": {
            "plugins": ["transform-react-constant-elements", "transform-react-inline-elements"]
        }
    }
}

#5  Split Split and Split

Most of the developers like to get chunky when it comes to bundling their front-end Javascript code into one minifies files which seems to be the accurate fit for small React apps. However, as the project grows, the process of delivering the bundled JavaScript file to the user's browser can be more time-consuming. Hence,  webpack users take advantage of the built-in code splitting feature to break their JavaSCript code into chunks that can be delivered to the browser as required.

#6  Compression by Gzip and Brotli

An alternate way to make your JS files load quicker and faster is to enable Gzip and Brotli on your web server as they can help to reduce the client's data usage by drastically improving render time. Moreover, always try to choose a CDN that will support and cache Brotli-compressed assets.

#7  Use the react plugin - Eslint

It is the perfect time to start with the ESLint plugin for all your JavaScript projects if you haven't really stepped into it. The eslint-plugin-react helps in coding novices by enforcing best practices and in the long run, it can improve your coding skills either.

#8  Call High Order Components

The Recompose library in React includes several high order components that can call upon to limit all the unnecessary rendering. For instance, input the given setup for making a component re-render only when props change:

@pure 
class MyComponent extends Component { 
    render() {
        //
    }
}

Let us say if you want a component to re-render if prop 1 and prop 2 changes but not when the prop 3 changes. For this:

@onlyUpdateForKeys(['prop1', 'prop2'])
class MyComponent extends Component { 
    render() {
        /// ...
    }
}

#9  Try to use Connect()

When you are using Redux, you have the higher order component connect() at your disposal to make things work even simpler. All the connected components get re-rendered only if the designated values get changed. For instance, the given snippet ensures that a component gets re-render only when prop1 changes:

connect(state => ({
    prop1: state.prop1
}))(SomeComponent)

If the mapStateToProps function performs a calculation then it can actually trigger a re-rendering.

connect(state => ({
    computedData: {
        height: state.height,
        width: state.width
    }
}))(SomeComponent)

To solve this issue, use the re-select function for declaring the dependencies to a derived state:

import { createSelector } from "reselect";

const selectComputedData = createSelector(
    state => state.height,
    state => state.width,
    (height, width) => ({
        height,
        width
    })
)

connect(state => ({
    computedData: selectComputedData(state)
}))(SomeComponent)

Wrapping up!

The key to the accurate working of your React application lies in making sure that the components can update when they need it absolutely. You can also use some other tools like a why-did-you-update library, React Developer Tools extension or The Chrome DevTools Performance Timeline to boost up your performance. Do not forget to run benchmarks before and after you make changes to your code in order to track your progress. Keep Learning!