×

Introduction

To begin, React.js is one of the most popular JavaScript libraries for building user interfaces. It offers a robust framework for developing dynamic web applications. Performance optimization is crucial in achieving efficiency, improves speed and overall performance. To improve the performance of your apps, let’s explore the various techniques to optimize your React.js application.

Techniques of performance optimization

Performance optimization techniques focus on ensuring that the React.js applications are responsive, efficient and run smoothly.

  • Use Purecomponent and ShouldComponentUpdate
  • Memorization
  • Use immutable Data structure
  • Lazy loading images and components
  • Code splitting and visualization

Use Purecomponent and ShouldComponentUpdate

To prevent unnecessary re-rendering of components, Use PureComponent and shouldComponentUpdate.

  • PureComponent: is a React base class that performs shallow comparison. It compares the props and state automatically.
class MyComponent extends React.PureComponent { render() { return <div>{this.props.text}</div>; } }

shouldComponentUpdate

shouldComponentUpdate is a lifecycle method that controls the re-rendering of components. It can be overridden in a regular class component. shouldComponentUpdate return true to re-render or false to skip the re-render. It receives the next props and next state as arguments.

class MyComponent extends Component { shouldComponentUpdate(nextProps, nextState) { // Only re-render if the &#8216;value&#8217; prop changes return nextProps.value !== this.props.value; }

Memoization

Memoization techniques improve the overall performance of the React applications. It minimizes the redundant work of expensive operations, calculations and computations. Memoization offers:

  • React.memo
  • UseMemo
  • UseCallback

React.memo is a component that memoizes a functional component. If a functional component has the same props, then re-rendering is not needed. Given the same props, the functional component will render the same output. React memo prevents the functional component from re-rendering.

Example:

import React from &#8216;react&#8217;; const MyComponent = React.memo(({ value }) => { console.log(&#8216;Rendered&#8217;); return <div>{value}</div>; });

useMemo

useMemo is a hook that is useful for expensive calculations. It memoizes the result of a function. useMemo recomputes the memoized value if one of the dependencies has changed. UseMemo is helpful as recalculation on every render is not needed.

Example:

import React, { useMemo } from &#8216;react&#8217;; const MyComponent = ({ value }) => { const computedValue = useMemo(() => { console.log(&#8216;Expensive computation&#8217;); return value * 2; }, [value]); return <div>{computedValue}</div>; };

useCallback

useCallback is a hook that is used to prevent unnecessary re-creation of functions. It returns a memoized version of a callback function. useCallback is useful when passing callbacks to child components.

Example:

import React, { useCallback } from &#8216;react&#8217;; const MyComponent = ({ onClick }) => { console.log(&#8216;Rendered&#8217;); return <button onClick={onClick}>Click me</button>; }; const ParentComponent = () => { const handleClick = useCallback(() => { console.log(&#8216;Button clicked&#8217;); }, []); return <MyComponent onClick={handleClick} />; };

Use immutable data structure

Immutable data structures are static data structures which do not change after creation. Modification leads to the creation of a new data structure. Immutable data structures are used in the React applications to enhance:

  • Performance
  • Maintainability
  • Predictability

Immutable data is used for efficient comparison of references. It allows predictable state management as it allows working with new objects. This makes the implementation process of various features like undo/redo easier.

The various data structures available to implement immutable data are:

Immutable.js Immer Immutable.js: Provides several varieties of immutable data structures, such as List, Map, Set, and more. Immutable map import { Map } from &#8216;immutable&#8217;; import React, { useState } from &#8216;react&#8217;; const MyComponent = () => { const [data, setData] = useState(Map({ count: 0 })); const increment = () => { setData(data.update(&#8216;count&#8217;, count => count + 1)); }; return ( <div> <p>Count: {data.get(&#8216;count&#8217;)}</p> <button onClick={increment}>Increment</button> </div> ); }; export default MyComponent;

Immer

Immer is a library that allows you to write code in draft state. It helps to work with immutable states and is useful in state management. The produce function in Immer is the core which mutates the draft. This draft is used to produce the next immutable state. The arguments for a produce function are the current state and the recipe function.

Example

import React, { useState } from &#8216;react&#8217;; import produce from &#8216;immer&#8217;; const MyComponent = () => { const [data, setData] = useState({ count: 0 }); const increment = () => { setData(produce(data, draft => { draft.count += 1; })); };

Lazy loading images and components

Large images slow down the speed of the application. So optimize the images by compressing them. Make use of modern formats like WebP. Leverage lazy loading for images to improve initial load times.

&#8220;`javascript <img decoding="async" src="image.webp" alt="description" loading="lazy" />

Lazy loading components reduce the initial load time by splitting the code into smaller chunks. They are loading only on demand.

const LazyComponent = React.lazy(() => import(&#8216;./LazyComponent&#8217;)); function App() { return ( <Suspense fallback={<div>Loading&#8230;</div>}> <LazyComponent /> </Suspense> ); }

Code splitting and visualization

The Code splitting technique improves the performance of the application by reducing the initial load time. It can be achieved using:

  • Dynamic imports
  • React.lazy
  • Suspense

Dynamic Imports To load modules asynchronously, dynamic imports are used by the import() function.

Example:

import React, { Suspense, lazy } from &#8216;react&#8217;; // Use React.lazy to load the component dynamically const LazyComponent = lazy(() => import(&#8216;./LazyComponent&#8217;)); const App = () => ( <div> <h1>My App</h1> <Suspense fallback={<div>Loading&#8230;</div>}> <LazyComponent /> </Suspense> </div> ); export default App;

Virtualization techniques are used to render large lists or tables. It renders only the items that are visible in the viewport. This technique improves performance by reducing the amount of rendering and updating of DOM elements. Virtualization can be achieved using libraries, such as:

  • react-window
  • react-virtualized
  • react-window

Lightweight library for rendering large sets of lists and tabular data. Install the react-window package using the command below and then use it to render the specific rows.

npm install react-window react-virtualized Feature-rich library for rendering large lists, tables, and grids. import React from &#8216;react&#8217;; import { FixedSizeList as List } from &#8216;react-window&#8217;; const Row = ({ index, style }) => ( <div style={style}>Row {index}</div> ); const MyList = () => ( <List height={200} // Height of the list container itemCount={1000} // Number of items in the list itemSize={35} // Height of each item width={300} // Width of the list container > {Row} </List> );

Join Credo Systemz Software Courses in Chennai at Credo Systemz OMR, Credo Systemz Velachery to kick-start or uplift your career path.

Conclusion

To conclude, optimizing the performance of the React.js application is vital using various techniques and best practices. It enhances the efficiency and responsiveness of the application. Get professional support to build effective React.js applications using hands-on training. Credo Systemz provides the React JS Training course in Chennai using experts.