API Optimization techniques in front-end for CRUD operations


There are three methods by which in frontend can perform the CUD(create, update and delete) :

By performing the CRUD operation and then

  1. If CUD API gives a successful response then make the get API call for that module: This is the most expensive because we making one extra API call after each CUD operation.
  2. If API’s status code is successful then we store/update the CUD API response in our store or show the updated data in the DOM: In this at the time of creation backend needs to send the unique id and the frontend needs to store the data send to backend (i.e payload) along with with the id to the store and show it on the DOM. There is a case where the user is on page 2 and creating the data. So the front end can append the data on page 2 at the top. When the user refreshes or come back to that page later on the data will be shown at the place where it should be. This is the best-optimized way to make the CUD API calls. Even if multiple users are updating the same data(i.e race condition)
  3. This is a single-user approach where there is no race condition arises(i.e single user is operating the single account):

In this approach after making the CUD operation frontend assumes the data is successfully updated in the database. We don’t need to wait for the CUD API’S response. This is the most complex but the fastest way to do any CUD operation from the front end. In this front end need to make validations 100% accurate so that the data we are updating is absolutely correct and servers are reliable and robust enough. But in this approach, there are some cases where the front end needs to make the get API request like 

a. When data is paginated and need to check whether the key is unique or not. 

b. When Creating the data need to wait for API response as a unique id need to be stored in our store. 


Suggestion for back-end: 

  1. At the of creating a return unique id is assigned to that data.
  2. At the time of updating no data is needed to send.
  3. Write the relevant message and status code.

Media storing in the backend:

Frontend needs to store the media best-optimized way by converting the media to the latest formats and compressing it (i.e. if these are images they should be converted to web, etc which takes 40% less storage). Because media is a major factor on which the loading time of API depends.


When frontend needs to implement the search:

If the front end needs to implement the search which is making the API call while typing each word. Then there should be debounced (i.e. delay) in making the API calls. And we need to cancel the previous API call which is no longer needed by the user.const delayedQuery = useCallback(debounce(q => sendQuery(q), 500), []);


Cancel axios requests on unmount:

It is one thing to write an asynchronous call to an API to fetch data, and it is another thing to cancel that call when it is not beneficial to our users. The single action of cancelling an API request when it is no longer needed leads to better performance. A common scenario where an API request needs to be cancelled is when a user navigates away from a page.

At the point the user navigates away from the page, all API requests made in it to update the state and render a view with the data is unnecessary and if not cancelled lead to memory leaks in an application. React alerts us to this problem by outputting these popular lines in the console. We can make a hook for handling this issue.

We can use the following approach to cancel the Axios request:

import axios from 'axios';
const useAxiosGet = () => {
    const cancelToken = axios.CancelToken.source();
    const getData = (path, onDone, onError, params) => {
    return new Promise((resolve, reject) => {
    axios
    .get(path, {
    cancelToken: cancelToken.token,
    ...params,
    })
    .then((res) => {
    if (onDone) onDone(res.data);
    resolve(res);
    })
    .catch((err) => {
    if (onError) onError(err);
    reject(err);
    });
    });
    };
    const cancelRequests = () => {
    if (cancelToken) cancelToken.cancel();
    };
    return [getData, cancelRequests];
    };
    
    export default useAxiosGet;import React, { useEffect, useState } from 'react';
    import useAxiosGet from './useAxiosGet';
    
    function Review() {
    const [setReview, review] = useState([]);
    const [getData, cancelRequests] = useAxiosGet();
    useEffect(() => {
    getData('https://630c7a2583986f74a7c1d2b9.mockapi.io/review', setReview);
    return cancelRequests;
    }, []);
    return <div>Review</div>;
    }
    
    export default Review;

Latest

SENTRY integration in your React Native App for Error/Crash tracking

Sentry captures data by using an SDK within your...

Recall the concepts of useCallback.

useCallback hook is one of the best hooks offered...

Value of Comments in the code!!

During my journey of Software Development, I am always...

YOLO:Bullet Paced Algorithm

http://sh017.hostgator.tempwebhost.net/media/33949d0e61af4b50f374c534713f56b3 According to world health organization, more than 1.35 million...

Featured

Developing Enterprise Application in Node.js – CJS Vs ESM

Node.js is a popular runtime environment for building server-side...

Integrating your web react applications with their React Native(android and IOS) apps using QR code

Integrating a web application with Android and iOS apps...

YOLO: Bullet Paced Algorithm – popular choice for object detection in autonomous vehicles 

According to world health organization, more than 1.35 million...

Importance of Test Scalar Tool

TestScalar is quick to access, convenient to execute, easy to track. Our popular web-based test planning software lets you focus on what matters: meeting...

From Requirements to Reporting: How to Use a Test Case Management Tool to Ace Your Software Testing

The Software Testing Life Cycle (STLC) is a process that describes the stages of testing software. It includes planning, design, execution, and reporting of...

YOLO:Bullet Paced Algorithm

http://sh017.hostgator.tempwebhost.net/media/33949d0e61af4b50f374c534713f56b3 According to world health organization, more than 1.35 million people die every year because of vehicle accidents . Vehicle safety features started with passive safety...

LEAVE A REPLY

Please enter your comment!
Please enter your name here