React is one of the renowned JavaScript libraries. While it supports a decent rendering mechanism, it sometimes needs performance optimization. If you are making a complex application that requires more scalability and security, try the following performance optimization techniques.
Before we discuss these methods, let’s learn some primary concepts of React performance.
VDOM
React employs a Virtual DOM, also known as VDOM, to enhance its performance. When you make changes to your app, React updates the VDOM. So you can compare the changes easily.
Reconciliation
Reconciliation is the process React uses to update the DOM and match the current component tree. It recognizes the differences by comparing the old VDOM with the new one. It gives updates on the DOM parts that have been modified.
Techniques to Optimize React Performance
Implement React. memo ()
React.memo tool helps you prevent unnecessary component rendering when the props received in that component do not change. It enhances the application’s performance to a great extent. Implementing React.memo is easy. See the following example.
import { memo } from "react";
import { MyComponent } from "./MyComponent";
export const App = () => {
// using a component
const MemoizedComponent = memo(MyComponent);
// using a function expression
const MemoizedComponent2 = memo(function ({ data }) {
return <div>Some interesting {data}</div>;
});
// using an arrow function
const MemoizedComponent3 = memo(({ data }) => {
return <div>Some interesting {data}</div>;
});
const someDataPassedAsProp = {};
return <MemoizedComponent data={someDataPassedAsProp} />;
};
List Virtualization in React Applications
Most React applications that showcase long lists get performance issues. The application renders the entire list in the DOM before getting loaded completely. It affects the performance to a certain extent.
One excellent way to deal with issues is Windowing. It allows you to render only certain items on the DOM. You do not need to render the entire list of components on your application’s screen. It will improve the performance naturally.
You can enable windowing using React-window or React-virtualized. Both libraries allow you to render subcategories of the extensive list on the application screen.
Lazy Loading Images
A React application with numerous images loads slowly. All the images are rendered on the DOM before they are available on the screen.
Thankfully, you can counter this issue using Lazy Loading Images. This technique allows images to wait until it is their turn to appear on the screen. Therefore, images do not create redundant DOM nodes.
Users can use React-lazyload or React-lazy-load-image-component. These two libraries are popularly used to boost React application performance.
Key Coordination for List Rendering
If you’re working with lists in React, assign key attributes to elements. It will render the upcoming items on the list. By assigning a key value to components you can avoid the bottleneck issue.
Use Key= { } for your dynamic lists to enhance the performance of the React app.
Implementation of PureComponent
Another promising way to boost the React performance is the execution of PureComponent. Use PureComponent instead of Component. It compares props and states to decide whether or not a component should be updated.
import React, { PureComponent } from 'react';
class MyComponent extends PureComponent {
// Component logic
}
Do Not Define the Inline Function
Sometimes, defining functions inside the render method becomes the culprit of poor performance. What you can do is define functions outside the render method. Apart from this, you may try using arrow functions for short event handlers.
See the following example:
class MyComponent extends React.Component {
handleClick = () => {
// Handle click
}
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}
Use Code Splitting
Another practical thing you can try to optimize the speed of a React application is code splitting. It lets you split your app into small chunks. Code splitting loads the codes required for certain features only. It automatically minimizes the initial load time.
import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
Use a Function in setState
Do not use an object in the setState function. Instead, use a function. It is because state changes are not suggested immediately as transferred by React docs. Therefore, instead of this: this.setState({correctData: !this.state.correctData});, use the following.
this.setState((prevState, props) => {
return {correctData: !prevState.correctData});
}
Trim JavaScript Bundles
Users who want to remove code redundancy specifically can trim their JavaScript packages. Eliminate all the duplicate and irrelevant codes. It will enhance your application’s performance several times. Analyze and determine bundled code.
Conclusion
Undoubtedly, React is an excellent JavaScript library that helps you create user interfaces based on components. As a result, several renowned companies, including LinkedIn, DropBox, etc., use it for their applications. However, it renders numerous irrelevant components causing performance-related issues.
In this post, we listed some techniques you can use to fix these issues without compromising the quality. Try these React optimization methods to make your application more responsive and user-friendly.
