How to optimize Performance of your React Application by Reducing Network call?

let says u have an Event container, they have EventList and EventDetail. The expected behavior would be when the user click on an specific Event on the list, it shows the detail of a Event.

Problem :

There’s a problem here, it requires 2 calls, one call to get the EventList and another call to get the EventDetail. But the API of EventList contain everything that’s need for EventDetail.

How to avoid call to EventDetail API ? and what if user directly comes to Event Detail Page so how to Call the EventDetail Api only that time ?

Solution :

On home Page of Event Listing fetch the EventList which is contains all the information, you need to store it somewhere. You know, to cache it or to store on Redux Store. So in a normal application you will show a loader to fetch the EventList then cache it, this is why we have Flux and Redux.

The solution to have 1 call for all the users is simple, when you listen to each user item click and then request depending on the user id is useless since like you said you already have all the information you need.

Once user click specific event , instead of fetching it from the server just pull it out of the array you saved. In our case we store the data in Redux.

events.filter((event) => event.id.match(match.params.eventid)

and Render your data on view.

What Happen if User Directly Comes to Event Detail Page ??

In this case , you dont have data in Redux Store. So now you have to call the Event Detail Api.

const fetchEvent = await api.fetchOne(PP_SINGLE_EVENT_ENDPOINT + match.params.eventid );
var eventData = await fetchEvent;

Code to Present Whole Idea :

import React, { useState, useEffect } from “react”;
import { PP_SINGLE_EVENT_ENDPOINT } from “../../redux/events/eventTypes”;
import moment from “moment”;
import * as api from “../../../src/api/index.js”;
import { FaClock } from “react-icons/fa”;
import Spinner from “../common/Spinner”;
import { useSelector } from “react-redux”;
const EventDetail = ({ match }) => {
const FORMAT = “ddd DD MMM, YYYY “;
const time = “HH:mm “;
const [event, SetEvent] = useState(0);
const [noData, SetNoData] = useState(false);
const events = useSelector((state) => state.events);
const fetchEvent = async () => {
if(events.length === 0){
const fetchEvent = await api.fetchOne(
PP_SINGLE_EVENT_ENDPOINT + match.params.eventid
);
var eventData = await fetchEvent;
}
else{
eventData = events.filter((event) => event.id.match(match.params.eventid))[0]
}
if(eventData === undefined){
SetNoData(true);
}
else{
SetNoData(false);
SetEvent(eventData.data );
}
};
useEffect(() => {
fetchEvent();
}, []);
return (
<>
{(noData) ? “No Event found” : event === 0 ? <Spinner />
: (
<>
<div className=”px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
<div className=”grid gap-10 row-gap-8 lg:grid-cols-5">
<div className=”lg:col-span-2">
<p className=”mb-2 text-xs font-semibold tracking-wide text-gray-600 uppercase”>
— {moment(event.startingAt).format(FORMAT)}
</p>
<div className=”mb-3">
<a
href=”/”
aria-label=”Article”
className=”inline-block text-black transition-colors duration-200 hover:text-deep-purple-accent-400"
>
<p className=”font-sans text-xl font-extrabold leading-none tracking-tight lg:text-4xl xl:text-5xl”>
{event.title}
</p>
</a>
</div>
<p className=”mb-4 text-base text-gray-700 md:text-lg”>
{event.description}
</p>
<div className=”flex items-center”>
<div>
<div>
<p className=”mb-2 text-base font-bold tracking-wide text-red-800 uppercase”>
Details
</p>
<p className=”text-base text-gray-700 md:text-base”>
Please join us in a discussion with Jackie Mullen from
Juniper Networks, Jessica Palmer from PTC, and Jenny
Beazley from Tableau Software to learn how they measure
success as well as any obstacles they’ve gone through
when developing their KPIs. Whether you are just
starting to develop KPIs for your team or are interested
in learning what successful KPIs are this is a session
you don’t want to miss.
</p>
</div>
</div>
</div>
<div className=”flex items-center”>
<div>
<div>
<p className=”mb-2 text-base font-bold tracking-wide text-red-800 uppercase my-6">
Address
</p>
<p className=”text-base text-gray-700 md:text-base”>
4091, Trainer Avenue, Illinois
</p>
</div>
</div>
</div>
</div>
<div className=”flex flex-col space-y-8 lg:col-span-3">
<div className=”lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
<img
className=”object-cover object-center rounded”
alt=”hero”
src=”https://dummyimage.com/720x600"
/>
</div>
<div className=”h-auto items-center”>
<div className=”shadow rounded-md bg-white w-auto max-w-lg h-auto”>
<div className=”flex items-center px-5 py-3">
<FaClock size=”14" className=”text-blue-600" />
<div className=”mx-3">
<p className=”text-gray-600">
Start Time{“ “}
<b> {moment(event.startingAt).format(FORMAT)}</b>,{“ “}
</p>
{moment(event.startingAt).format(time)}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)}
</>
);
};
export default EventDetail;