5 Tips to Optimize React Frontend Performance

How to Improve React Frontend Performance

In modern web application development, performance is the key to a better user experience. Using React will inevitably result in intuitive user interfaces, providing enhanced user experience for many applications without requiring much effort to optimize for performance explicitly. But developers often tend to struggle with performance issues when building larger applications, and various methods can be used to further optimize your React application performance.

In this article, I will discuss five tips and tricks to boost React frontend performance.

1. Avoid Reconciliation with React.PureComponent

React uses the virtual DOM (VDOM) programming concept in which a library like ReactDOM maintains a “virtual” representation of the user interface in memory and keeps it in sync with the “actual” DOM. This is referred to as reconciliation.

Re-rendering takes time, even if React only updates the modified DOM nodes. The lifecycle function shouldComponentUpdate(), which is called before the re-rendering process begins, is not often a problem. However, if the delay is apparent, you can accelerate the process by overriding shouldComponentUpdate(). This function’s default implementation returns true, leaving React to handle the update as shown below:

shouldComponentUpdate(nextProps, nextState) {
return true;
}

You can return false from shouldComponentUpdate() to completely omit the rendering process if you are aware that your component won’t be needed to update in some circumstances.

This optimization strategy can be made a little easier and more automated with the help of React’s “pure” components. A PureComponent implements its shouldComponentUpdate()with a shallow prop and state comparison.

This implies that it compares values for primitive data types and references for objects. As a result, when utilizing React.PureComponent, we need to ensure the following two prerequisites are fulfilled :

  • Component state/props should be an immutable object, shouldn’t have many levels of nested objects, and should contain primitive data.
  • All children should also be “pure” or functional components.

2. Using Immutable Data Structures

Think about an effective approach to detect complex props or state changes automatically. This is where immutable data structures come in handy.

The concept behind using immutable data structures is straightforward; rather than making changes directly to an object that contains complex data, create a replica of the object that has been updated with the changes. As a result, identifying data changes is as easy as comparing the references of the two objects.

To automatically check for a complex state change, immutable data structures can be used with React.PureComponent. For instance, using a state-management toolkit like Redux, you can keep all state objects in a solitary store if the state in your application is immutable, making it simple to incorporate undo and redo capabilities.

Utilizing a library that offers immutable data structures is much better. It can be challenging to update immutable objects when working with highly nested objects. If you encounter this issue, consider utilizing Immer or immutability-helper. These libraries enable you to create more readable code while retaining the advantages of immutability.

There are some benefits of using immutable data structures:

  • There are no side effects.
  • The creation, testing, and use of immutable data objects are simple.
  • They assist us in writing code that can be utilized to rapidly monitor for state changes without having to check data repeatedly.
  • They support avoiding temporal coupling.

3. Use the Production Build

When creating a React app, you are given incredibly helpful warnings and error messages. These make finding bugs and problems while developing software a lot easier. However, they come at a cost in terms of performance.

Therefore, test your React applications with the minified production build if you’re benchmarking or having performance issues. The end user doesn’t require these pieces of code that React is running in your development environment. All of this extraneous code can be removed for production environments.

If you used create-react-app to launch the project, you could execute the npm run build to generate the production build without these additional codes. However, if you are using Webpack directly, run webpack -p (comparable to webpack — optimize-minimize — define process.env.NODE ENV=”’production’”).

The /build sub-directory of your project will now contain a production build of your application. Keep in mind that this is only required before production deployment. Use npm start for usual development.

4. Multiple Chunk Files

Initially, your React application will have only a few components. However, the application will grow with time when you continue adding new features and dependencies. And without you realizing it, you will have a massive production file in your hands.

We usually bundle all of our frontend JavaScript code in a single minified file for single-page React applications. This is effective for applications that are small to medium in size. However, when it expands in size, sending this bundled JavaScript code to the browser can be time intensive, affecting the application’s performance.

If you are building your React project with Webpack, you may take advantage of its code-splitting functionalities. Separate your built application code into many “chunks”. For example, you can use CommonsChunkPlugin to split the bundle containing two independent files by separating your vendor or third-party library code from your application code and delivering them to the browser on an on-demand basis. You’ll get vendor.bundle.js and app.bundle.js in the end. By splitting your files, your browser caches rarely and parallelly download resources to minimize load time delay.

On-demand code splitting is a more prominent feature of Webpack. It can be used to split code into smaller chunks that can be loaded when necessary. This reduces the time to load the program by keeping the initial download minimal. The browser can then download more code chunks as required by the application.

5. Virtualize Long Lists

If you are presenting a list containing a vast amount of data, you should only render a small piece of it at any given time within the visible viewport. The data is only shown while in the viewport, and more data can be rendered as the list is being scrolled down. This technique is known as “windowing.” This technique can significantly minimize the time consumed to re-render the components and the number of DOM nodes generated because it only renders a small portion of rows at a time.

A couple of well-known windowing libraries are [react-window](https://react-window.vercel.app/#/examples/list/fixed-size) and [react-virtualized](https://bvaughn.github.io/react-virtualized/#/components/List). They offer several reusable components to present grids, lists, and tabular data. Of course, if you need anything specific to your application’s requirements, you may continually develop your windowing component as Twitter did.

Final Thoughts

A React web app’s performance is determined by its components’ conciseness. Having stated that, it is vital to understand how React components work, render, and diffing techniques before addressing performance issues. With the help of the React lifecycle methods, you may avoid unnecessary component renderings. If you eliminate those constraints, your application will run as seamlessly as your users expect. So, all of these ideas should be considered while enhancing your React application performance.

Although there are various other ways to enhance the performance of your React application, I hope this article will help you with the best tips to optimize React’s frontend performance.

Thank you for reading!

Build apps with reusable components like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

Micro-Frontends

Design System

Code-Sharing and reuse

Monorepo

Learn more


5 Tips to Optimize React Frontend Performance was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Improve React Frontend Performance

In modern web application development, performance is the key to a better user experience. Using React will inevitably result in intuitive user interfaces, providing enhanced user experience for many applications without requiring much effort to optimize for performance explicitly. But developers often tend to struggle with performance issues when building larger applications, and various methods can be used to further optimize your React application performance.

In this article, I will discuss five tips and tricks to boost React frontend performance.

1. Avoid Reconciliation with React.PureComponent

React uses the virtual DOM (VDOM) programming concept in which a library like ReactDOM maintains a “virtual” representation of the user interface in memory and keeps it in sync with the “actual” DOM. This is referred to as reconciliation.

Re-rendering takes time, even if React only updates the modified DOM nodes. The lifecycle function shouldComponentUpdate(), which is called before the re-rendering process begins, is not often a problem. However, if the delay is apparent, you can accelerate the process by overriding shouldComponentUpdate(). This function's default implementation returns true, leaving React to handle the update as shown below:

shouldComponentUpdate(nextProps, nextState) {
return true;
}

You can return false from shouldComponentUpdate() to completely omit the rendering process if you are aware that your component won't be needed to update in some circumstances.

This optimization strategy can be made a little easier and more automated with the help of React’s “pure” components. A PureComponent implements its shouldComponentUpdate()with a shallow prop and state comparison.

This implies that it compares values for primitive data types and references for objects. As a result, when utilizing React.PureComponent, we need to ensure the following two prerequisites are fulfilled :

  • Component state/props should be an immutable object, shouldn't have many levels of nested objects, and should contain primitive data.
  • All children should also be “pure” or functional components.

2. Using Immutable Data Structures

Think about an effective approach to detect complex props or state changes automatically. This is where immutable data structures come in handy.

The concept behind using immutable data structures is straightforward; rather than making changes directly to an object that contains complex data, create a replica of the object that has been updated with the changes. As a result, identifying data changes is as easy as comparing the references of the two objects.

To automatically check for a complex state change, immutable data structures can be used with React.PureComponent. For instance, using a state-management toolkit like Redux, you can keep all state objects in a solitary store if the state in your application is immutable, making it simple to incorporate undo and redo capabilities.

Utilizing a library that offers immutable data structures is much better. It can be challenging to update immutable objects when working with highly nested objects. If you encounter this issue, consider utilizing Immer or immutability-helper. These libraries enable you to create more readable code while retaining the advantages of immutability.

There are some benefits of using immutable data structures:

  • There are no side effects.
  • The creation, testing, and use of immutable data objects are simple.
  • They assist us in writing code that can be utilized to rapidly monitor for state changes without having to check data repeatedly.
  • They support avoiding temporal coupling.

3. Use the Production Build

When creating a React app, you are given incredibly helpful warnings and error messages. These make finding bugs and problems while developing software a lot easier. However, they come at a cost in terms of performance.

Therefore, test your React applications with the minified production build if you’re benchmarking or having performance issues. The end user doesn’t require these pieces of code that React is running in your development environment. All of this extraneous code can be removed for production environments.

If you used create-react-app to launch the project, you could execute the npm run build to generate the production build without these additional codes. However, if you are using Webpack directly, run webpack -p (comparable to webpack — optimize-minimize — define process.env.NODE ENV=”’production’”).

The /build sub-directory of your project will now contain a production build of your application. Keep in mind that this is only required before production deployment. Use npm start for usual development.

4. Multiple Chunk Files

Initially, your React application will have only a few components. However, the application will grow with time when you continue adding new features and dependencies. And without you realizing it, you will have a massive production file in your hands.

We usually bundle all of our frontend JavaScript code in a single minified file for single-page React applications. This is effective for applications that are small to medium in size. However, when it expands in size, sending this bundled JavaScript code to the browser can be time intensive, affecting the application’s performance.

If you are building your React project with Webpack, you may take advantage of its code-splitting functionalities. Separate your built application code into many “chunks”. For example, you can use CommonsChunkPlugin to split the bundle containing two independent files by separating your vendor or third-party library code from your application code and delivering them to the browser on an on-demand basis. You'll get vendor.bundle.js and app.bundle.js in the end. By splitting your files, your browser caches rarely and parallelly download resources to minimize load time delay.

On-demand code splitting is a more prominent feature of Webpack. It can be used to split code into smaller chunks that can be loaded when necessary. This reduces the time to load the program by keeping the initial download minimal. The browser can then download more code chunks as required by the application.

5. Virtualize Long Lists

If you are presenting a list containing a vast amount of data, you should only render a small piece of it at any given time within the visible viewport. The data is only shown while in the viewport, and more data can be rendered as the list is being scrolled down. This technique is known as “windowing.” This technique can significantly minimize the time consumed to re-render the components and the number of DOM nodes generated because it only renders a small portion of rows at a time.

A couple of well-known windowing libraries are [react-window](https://react-window.vercel.app/#/examples/list/fixed-size) and [react-virtualized](https://bvaughn.github.io/react-virtualized/#/components/List). They offer several reusable components to present grids, lists, and tabular data. Of course, if you need anything specific to your application's requirements, you may continually develop your windowing component as Twitter did.

Final Thoughts

A React web app’s performance is determined by its components’ conciseness. Having stated that, it is vital to understand how React components work, render, and diffing techniques before addressing performance issues. With the help of the React lifecycle methods, you may avoid unnecessary component renderings. If you eliminate those constraints, your application will run as seamlessly as your users expect. So, all of these ideas should be considered while enhancing your React application performance.

Although there are various other ways to enhance the performance of your React application, I hope this article will help you with the best tips to optimize React’s frontend performance.

Thank you for reading!

Build apps with reusable components like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

Micro-Frontends

Design System

Code-Sharing and reuse

Monorepo

Learn more


5 Tips to Optimize React Frontend Performance was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.


Print Share Comment Cite Upload Translate
APA
Piumi Liyana Gunawardhana | Sciencx (2024-03-28T15:45:06+00:00) » 5 Tips to Optimize React Frontend Performance. Retrieved from https://www.scien.cx/2022/11/03/5-tips-to-optimize-react-frontend-performance/.
MLA
" » 5 Tips to Optimize React Frontend Performance." Piumi Liyana Gunawardhana | Sciencx - Thursday November 3, 2022, https://www.scien.cx/2022/11/03/5-tips-to-optimize-react-frontend-performance/
HARVARD
Piumi Liyana Gunawardhana | Sciencx Thursday November 3, 2022 » 5 Tips to Optimize React Frontend Performance., viewed 2024-03-28T15:45:06+00:00,<https://www.scien.cx/2022/11/03/5-tips-to-optimize-react-frontend-performance/>
VANCOUVER
Piumi Liyana Gunawardhana | Sciencx - » 5 Tips to Optimize React Frontend Performance. [Internet]. [Accessed 2024-03-28T15:45:06+00:00]. Available from: https://www.scien.cx/2022/11/03/5-tips-to-optimize-react-frontend-performance/
CHICAGO
" » 5 Tips to Optimize React Frontend Performance." Piumi Liyana Gunawardhana | Sciencx - Accessed 2024-03-28T15:45:06+00:00. https://www.scien.cx/2022/11/03/5-tips-to-optimize-react-frontend-performance/
IEEE
" » 5 Tips to Optimize React Frontend Performance." Piumi Liyana Gunawardhana | Sciencx [Online]. Available: https://www.scien.cx/2022/11/03/5-tips-to-optimize-react-frontend-performance/. [Accessed: 2024-03-28T15:45:06+00:00]
rf:citation
» 5 Tips to Optimize React Frontend Performance | Piumi Liyana Gunawardhana | Sciencx | https://www.scien.cx/2022/11/03/5-tips-to-optimize-react-frontend-performance/ | 2024-03-28T15:45:06+00:00
https://github.com/addpipe/simple-recorderjs-demo