Optimizing Web Apps in React

React is a popular JavaScript library used to build frontend interactive user interfaces (UIs) for applications. It improves speed and effectiveness in terms of user interaction, data population, and more.

However, developing web apps in React can be expensive when creating/updating DOM on user actions, loading necessary/unnecessary resources from the network, and passing data from one component to others.

Unoptimized React code can create issues with user interaction, UI rendering, and load resources. Since it doesn't take care of all interactions with the DOM, you have to do it yourself. Fortunately, there are React web app optimization techniques you can use. We’ll explore a few.

React performance tips

Let’s look at some optimization techniques using React Hooks.

useCallback

Let's consider a scenario where there is a user list table. We will render a list of users using a loop. There will be an onClick function for each row. Users can click any row to select that particular user and see their details.

On the first render of the user list, the function instance will be created in the memory for each item. Whenever the end user performs an action that causes a resending, the functions instance will be recreated. Even though the old instance was created, it will always create a new one on each render.

Let's optimize it using the React useCallback hook.

Code without useCallback:

import { useState } from "react";

function Users() {
    
    const users = [
        {id:1,name:'zain',designation:'software engineer'},
        {id:2,name:'faraz',designation:'software engineer'},
        {id:3,name:'arsalan',designation:'lecturer'},
    ]

    const [details,setDetails]=useState({})
    const [isModalOpen,setIsModalOpen]=useState(false)

    const openDetails = (data)=>{
        setIsModalOpen(!isModalOpen)
        setDetails(data)
    }

    return (  
        <div className="App">
           {isModalOpen &&  <div>
                <p>{details.name}</p>
                <p>{details.designation}</p>
            </div>}
            <table>
                <thead>
                    <tr>
                        <td>ID</td>
                        <td>NAME</td>
                        <td>DESIGNATION</td>
                    </tr>
                </thead>
                <tbody>
                {users.map((item,index)=>{
                    return(
                         <tr>
                            <td>{item.id}</td>
                            <td>{item.name}</td>
                            <td>{item.designation}</td>
                            <td><button onClick={()=>openDetails(item)}>Details</button></td>
                        </tr>
                    )
                })}
                </tbody>
            </table>
        </div>
    );
}

export default Users;

We wrap the function in useCallback so that on every render, it checks if the old instance exists. It will not create a new one and no extra memory will be used.

Code with useCallback:

import { useState, useCallback } from "react";

function Users() {
    
    const users = [
        {id:1,name:'zain',designation:'software engineer'},
        {id:2,name:'faraz',designation:'software engineer'},
        {id:3,name:'arsalan',designation:'lecturer'},
    ]

    const [details,setDetails]=useState({})
    const [isModalOpen,setIsModalOpen]=useState(false)


    const openDetails = useCallback(() => {
        setIsModalOpen(!isModalOpen)
        setDetails(data)
  }, [details])

    return (  
        <div className="App">
           {isModalOpen &&  <div>
                <p>{details.name}</p>
                <p>{details.designation}</p>
            </div>}
            <table>
                <thead>
                    <tr>
                        <td>ID</td>
                        <td>NAME</td>
                        <td>DESIGNATION</td>
                    </tr>
                </thead>
                <tbody>
                {users.map((item,index)=>{
                    return(
                         <tr>
                            <td>{item.id}</td>
                            <td>{item.name}</td>
                            <td>{item.designation}</td>
                            <td><button onClick={()=>openDetails(item)}>Details</button></td>
                        </tr>
                    )
                })}
                </tbody>
            </table>
        </div>
    );
}

export default Users;

useMemo

Let’s consider another scenario where we create a component that will be used to create a geometric shape with the help of expensive calculations. It will return coordinates that will be used to build the geometric shape on the UI.

Using a function that requires some number params, we will perform the calculation in a function.

On updating the coordinate state in the component, the calculation function will run and perform the calculation even if the params and/or result is the same. This can cause a block for end users who may not see updated data as expected.

Code without useMemo:

import { useState } from "react";

function GeometryShapes() {

    const [coordinates,setCoordinates] = []

    const onChange = (index,item) => {
        const temCoordinates = [...coordinates]
        temCoordinates[index] = item;
        calculateCordinates(coordinates)
    }
  
    return (  
        <div className="">
            <div>
                <button onClick={()=>setCoordinates([...coordinates,0])}></button>
                <label>Coordinate</label>
                {coordinates.map((item,index)=>{
                    return(
                        <input value={item} onChange={()=>{index,item}} />
                        )
                    })}
            </div>

        </div>
    );
}

function calculateCordinates([]) {
    //Here will be shapes coordinate calculation logic
    return 
  }

export default GeometryShapes;

Now, we will optimize the code with the useMemo hook and wrap the function in useMemo.

The useMemo hook will work as a memorizer for that particular function. If params are the same, it will return the memorized value that was calculated last. In this way, there will be less or even no UI lag on screen.

Code with useMemo:

import { useState, useMemo } from "react";

function GeometryShapes() {

    const [coordinates,setCoordinates] = []

    const onChange = (index,item) => {
        const temCoordinates = [...coordinates]
        temCoordinates[index] = item;
        useMemo(() => calculateCordinates(coordinates), [coordinates]);

    }
  
    return (  
        <div className="">
            <div>
                <button onClick={()=>setCoordinates([...coordinates,0])}></button>
                <label>Coordinate</label>
                {coordinates.map((item,index)=>{
                    return(
                        <input value={item} onChange={()=>{index,item}} />
                        )
                    })}
            </div>

        </div>
    );
}

function calculateCordinates([]) {
    //Here will be shapes coordinate calculation logic
    return 
  }

export default GeometryShapes;

Lazy loading

One of the most crucial aspects in React web app optimization is optimizing an application so that it takes the least amount of time to load on the end user’s browser. All the scripts, pages, fonts, and other resources should load quickly.

React has a lazy loading feature which is a simple optimization technique that creates an environment where the UI page can render quickly with all necessary resources.

With lazy loading, you load only those particular resources that are required for the current page. You can also prefetch the resources in the background which can be useful for further user actions. In addition, you can load resources/components on runtime when the user navigates to those pages.

Here’s a basic example.

In this code, we’re importing two components, Customer and Admin. Since there is a condition in the return method, it will render only a single component at a time - Customer or Admin. However, both components will load at the same time, irrespective of the rendering condition.

import React, { Suspense } from "react";
const Customer = React.lazy(() => import("./Customer.js"));
const Admin = React.lazy(() => import("./Admin.js"));

//Instead of regular import statements, we will use the above approach for lazy loading

export default (props) => {
	if (props.user === "admin") {
		return (
			// fallback component is rendered until our main component is loaded
			<Suspense fallback={<div>Loading</div>}>
				<Admin />
			</Suspense>
		);
	} else if (props.user === "customer") {
		return (
			<Suspense fallback={<div>Loading</div>}>
				<Customer />
			</Suspense>
		);
	} else {
		return <div> Invalid User </div>;
	}
};

We used the React.lazy loading method to wrap the components which will only render on conditional logic and use it in return. Whenever the component needs to render, it will load first and render it.

What will display while the component is loading to render? Here, we used Suspense to render the conditional component while the main component loads. The conditional component can be a loader or something else that can be shown to the user when any UI is preparing to be constructed on DOM.

Code splitting

When constructing a component, the code can sometimes become quite large. For instance, we render a table with nine columns. There are update and delete actions as well. Upon selecting a row/record, a popup will display the details of the same. We also have pagination and ascending/descending filters.

There are two problems in this example. The first line of code for the component is large. If we want to use the same kind of table in another page, we will need to create the code. There are two ways to address this.

One, we can create a separate component for the table for columns/rows. Two, we can create a separate component for pagination and another for the popup. These components will accept props that we pass and the data will be displayed accordingly.

By doing this, we can reduce the lines of code in each component and use them as reusable components elsewhere.

React Developer Tool

React Profiler (React Developer Tools) gives a detailed summary of web app components, from DOM rendering to UI updating. It provides a complete tree structure for the component where you can examine state change, functions execution, data population as props, etc.

The React Developer Tools Chrome extension enables two tabs/options in the inspect element in the browser for your React app, Component, and Profiler.

Using component options from Profiler, you can view your component structure tree with all the states and functions defined in that component. It will show all the actions (state updating, function execution, and UI elements rendering).

On the Profile tab, you can record the end-to-end component actions/updating/rendering and observe what optimization is required on that particular component. You see how many times the component re-renders, how much time it took, and more.

Conclusion

React, without a doubt, is a good choice for building frontend interactive, cross-platform apps. It can be used for simple and complex applications, especially when data frequently changes on the frontend. It’s an excellent library, thanks to its flexibility which allows you to build lightweight applications that offer solid performance.

However, React also comes with some drawbacks. Web app performance can be affected when developers don’t apply optimization techniques and write unoptimized code. The React web app optimization tips and techniques described in this article can help you make UI faster, reduce the time to load resources, and make it easier to debug issues.