I am busy working on a "Headless" E-Commmerce Application in ReactJS and I Have stumbled upon an issue regarding performance.

My application uses a serverless approach with commercejs meaning I fetch my products and every other data via API calls instead of a traditional approach that involves me setting up a database and having other backend tools.

I already have this:

const App = () => {
    const [products, setProducts ] = useState([]);
    const getProducts = async () => {
        const { data } = await commerce.products.list();
        setProducts(data)
    }
    useEffect(() => {
        getProducts()
    },[])
}

Which is all used to get products and assign them to the products variable which I map through to display them inside divs and this works perfectly.

Here's what I need help with:

1. Is it be a good idea for me to use localStorage to store products instead of making a new commerce.products.list() every time the same user visits a page that need to display products?
2. Also, if so, how would one go about creating a function that knows when to update the products localStorage if there has been any changes (say a new product has been added or there's been price change for a certain product) if the products are now being fetched from localStorage?

Surely the answer to number 2, if is a yes, will be something like: make api requests that will be called on intervals but my main question/concern is how to know exactly when localStorage should be updated in an event like this without calling the API every now and then?

Also the use of sessionStorage did cross my mind, and it seemed like a better idea as the products data will be updated every time a user visits the application but I have considered the possibility of a user resuming a current window which was left open in the background for weeks and not see anything new.

I know this isn't a typical code/error/solution question but still any form of guidance/assistance will be highly appreciated.