How To Optimize Performance Of React App?

Since the inception of React, it has transformed a way to build web applications. By using virtual DOM, React can make UI updates more efficiently. Mostly this makes web apps more irritable. Developers complain that medium sized react web apps perform so poorly and slowly. So here we came with some tips to optimize performance of react apps. Let’s have a look at those tips.

Also know the best react component libraries at- 10 Best React component libraries you should know in 2020

Tips To Optimize Performance Of React Apps-

1. Multiple Chunk Files-

Your app starts with a few components. You start adding new dependencies and features and before you know it, you end up with a big production file. Consider having separate two files by separating your vendor or third-party library code from app code by leveraging CommonChunkPlugin for webpack. You’ll end up with vendor.bundle.js and app.bundle.js. By dividing your files, browser caches less frequently and parallel downloads resources to minimize the load time wait. If you’re using latest version of webpack, consider SplitChunksPlugin.

2. Using Production Mode Flag In Webpack-

If you have used webpack 4 as a module bundler for your app, set the mode option to production. Basically it tells webpack to use the built-in optimization:

   module.exports = {
      mode: 'production'
    };

Alternatively, you can pass it as a CLI argument:

webpack –mode=production

This will limit optimizations, like minification or removing development-only code to libraries. It won’t expose source code, file paths and so on.

3. Function/Stateless Components and React.PureComponent-

In react development, function components and PureComponent provides two different ways of optimizing react apps at component level. Function components prevent constructing instances of class while minimizing the overall bundle size as it minifies better than classes. Conversely, so as to optimize UI updates, you can convert function components to PureComponent class. If component doesn’t use state and other life cycle methods, the initial render time is somehow more complex when compared to function components with faster updates. 

When to use React.PureComponent?

React.PureComponent does a shallow comparison on state change. Meaning that it compares values when looking at primitive data types and compares references for objects. Because of this, you must ensure two criterias fulfil when using React.PureComponent:

• Props/State should not have multi-level nested object. 

Tip- All child component of React.PureComponent should be a Pure or functional component.

• Component State/Props is an immutable object;

4. Use React.Fragments to Avoid Additional HTML Element Wrappers-

React.fragments allows you to group a list of children without adding an extra node.

class Comments extends React.PureComponent{
    render() {
        return (
            <React.Fragment>
                <h1>Comment Title</h1>
                <p>comments</p>
                <p>comment time</p>
            </React.Fragment>
        );
    } 
}

There is alternate and more concise syntax using React.fragments:

class Comments extends React.PureComponent{
    render() {
        return (
            <>
                <h1>Comment Title</h1>
                <p>comments</p>
                <p>comment time</p>
            </>
        );
    } 
}

5. Using Immutable Data Structures-

Read more