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;