How to load data from api and load component asynchronously with map function

Question

My backend database has a hundreds of products stored and i want to list them to the frontend react user in a async way without waiting until all data is loaded. although i use the api cashing but it's still taking few seconds to map products list to components.

I use a useAPI hook with axios & async/wait function to fetch data from api.

Is there any way to improve the loading and make the component update periodically ? How can i cache data in the frontend to avoid overcalls for the database ?

import React from "react";
import useAPI from '../../api/useAPI'
import { ProductsListWrap, ProductCard } from '../../components'

const ProductsList = (props) => {

   const handleSelect = (data) => {
      console.log(data)
   };
   
   const [products, loading, error, retry] = useAPI('/api/v1/products');
   return (
   <ProductsListWrap>
            {products.map((data, i) => {
              return (
                <ProductCard
                  handleSelect={() => handleSelect(data)}
                  key={i}
                  {...data}
                />
              );
            })}
    </ProductsListWrap>
  );
};

export default ProductsList;

   

Answer 1

First, you probably need to paginate your requests..

You can create a 'cache' adding a state to your hook. Also you would need to create a function inside to make the request whenever you want.

Add also a function called, i.e. fetchData to your hook (if it does not exists already).

Return also that fetchData function.

function yourHook() {
  const [cache, setCache] = useState();

  function fetchData() {
    if (!cache) {
      // your axios logic
      setCache(response);
    }
  }

  ...

  return [fetchData, cache, loading, error, retry];
}

Call fetchData in your component (note that now products is cache):

const [fetchData, products, loading, error, retry] = useAPI('/api/v1/products');

useEffect(() => {
  fetchData();
}, []);

return (
  <ProductsListWrap>
    {products && products.map...}
  </ProductsListWrap>
);