React is a popular JavaScript library used to build frontend interactive user interfaces (UIs) for...

Unoptimized React code can create issues with user interaction, UI rendering, and load resources. Avoid them by learning React web app optimization techniques.

How to Optimize Web Apps in React

Optimizing Web Apps in React

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

React performance tips

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.

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.

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;

useCallback

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.

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.

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;

useMemo

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.

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.

Lazy loading

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.

Code splitting

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.

React Developer Tool

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.

Conclusion

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, react developers have to handle the issue by themselves. Fortunately, there are React web app optimization techniques you can use. We’ll explore a few.

No, React.js is a frontend library that is used to build UI components using JSX terms. This means you can write HTML/CSS and JS in the same line.

Next.js is a framework built on top of React.js with more advanced concepts like server-side rendering and SEO.

React.js uses a reconciliation mechanism to create/update DOM elements in a tree. After DOM and virtual DOM are created for the first time, React detects updates/changes and compares them between virtual DOM element(s) and real DOM element(s). It updates that specific tree element(s). React.js also updates after every 16ms.

If the code is not up to standard, React web apps can experience performance problems.

React web apps need to be properly optimized for SEO. To do so, you either need to switch to the Next.js framework or perform complex integration on React.js.

Since React.js is a UI library, there is no standard architecture pattern to follow when building web apps.

Frequently Asked Questions

What’s up with Turing?
Get the latest news about us here.

Press

Know more about remote work.
Checkout our blog here.

Blog

Have any questions?
We’d love to hear from you.

FOR DEVELOPERS

Optimizing Web Apps in React

Author

Zain Ahmed

How to Connect Node.js to MongoDB

How to Create React Search Component Using React Hooks

10 Best Practices for Writing Clean React Code

React SEO: A Guide to Building SEO-Friendly React Web Apps

How to Use Webpack With React

Frequently Asked Questions

Press

Blog

Contact

Hire remote developers