[bug]: Infinite Reloading when magento cart id changes in storage

[MichaelHeinzman]

Describe the bug When multiple tabs are open our site was receiving infinite reloads after changing the magento cart id in storage. This was after upgrading from version 11 to 12.4.0 of magento peregrine. Which makes sense, since the useEventListener to reload the page when cart id changes was added to cart.js in 12.1.0.

This may be a specific case for our site, but I believe it's something we only ran into because of how the storage listener and the reload when cart id changes was handled.

When a change is detected, it reloads the page which is correct behavior. However, reloading doesn't cause the useEventListener hook to remove it's event listener. Once I added a line to remove the event listener before reloading, it stopped the infinite reloads. To fix this in our site I had to create a custom cart.js and PeregrineContextProvider to make the change.

I believe react doesn't have a chance to run the code in the return statement of useEventListener in the useEffect.

Expected behavior Reloads once after cart change but not infinitely.

Possible solutions

Removing event listener before the reload.

    // Storage listener to force a state update if cartId changes from another browser tab.
    const storageListener = useCallback((e) => {
        const storage = new BrowserPersistence();
        const currentCartId = storage.getItem('cartId');
        const { cartId } = cartState;
        if (cartId && currentCartId && cartId !== currentCartId) {
            e.target.removeEventListener(e.type, storageListener);
            globalThis.location && globalThis.location.reload();
        }
    }, [cartState]);

OR

Removing event listener using beforeunmount in the useEventListener hook so that it guarantees it runs on reloads.

• [12.4.0] peregrine

[m2-assistant[bot]]

Hi @MichaelHeinzman. Thank you for your report. To speed up processing of this issue, make sure that you provided sufficient information. Add a comment to assign the issue: @magento I am working on this

---

Join Magento Community Engineering Slack and ask your questions in #github channel.

[glo11372]

Infinite Reloading when magento cart id changes in storage Hi, As per testing the issue, we are not able to reproduce it and also using @magento/peregrine:version: 13.2.1. kindly suggest if we are missing any steps to reproduce the same Steps we tried-:

1. open different tabs (we tried with 28 tabs)
2. Inspect and open applications and clear all
3. Reload it

Expected: all pages reloads but not infinite Attaching the vedio for the same Thank You

https://github.com/magento/pwa-studio/assets/143005735/8bee83ea-770b-4e29-94b4-1702eef3ed67

[glo11372]

Hi @MichaelHeinzman As its is more than 2 weeks, so we are closing this issue. If you have further any issue with this ticket.Please free to discuss with us. Thank You