×

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 Pure component and Should Component Update
  • Memorization
  • Use immutable Data structure
  • Lazy loading images and components
  • Code splitting and visualization

Use Pure component and Should Component Update

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

  • Pure Component: 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>; } }

should Component Update

should Component Update is a lifecycle method that controls the re-rendering of components. It can be overridden in a regular class component. should Component Update 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 value 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 react; const MyComponent = React.memo(({ value }) => { console.log(Rendered); 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 react; const MyComponent = ({ value }) => { const computedValue = useMemo(() => { console.log(Expensive computation); 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 react; const MyComponent = ({ onClick }) => { console.log(Rendered); return <button onClick={onClick}>Click me</button>; } const ParentComponent = () => { const handleClick = useCallback(() => { console.log(Button clicked); }, []); 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 immutable; import React, { useState } from react; const MyComponent = () => { const [data, setData] = useState(Map({ count: 0 })); const increment = () => { setData(data.update(count, count => count + 1)); }; return ( <div> <p>Count: {data.get(count)}</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 react; import produce from immer; 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.

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(./LazyComponent)); function App() { return ( <Suspense fallback={<div>Loading</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:

npm install react-window react-virtualized Feature-rich library for rendering large lists, tables, and grids. import React from react; import { FixedSizeList as List } from react-window; 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> );

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 react; import { FixedSizeList as List } from react-window; 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.

Call Now Button