Having issue with the react redux state in unmounting stage

by

I am trying to build an E-commerce website. Everything is working fine If I do the order as per the steps in one flow, but if I refresh the browser so redux state will update and show null value.
I am facing an issue in the cart and order section.

Github link

To solve the problem I am using local storage, so once the user select the items in the cart, It will add an array in the localstorage and then I added the details in the initial store of redux from local storage using getItem() method.

I am getting the details from store in the app section (checked using console.log()) but not in cart and order components. If I refresh the browser the state will update as the default behavior and show null value and component not working.

The problem is basically because of unmounted component and here is the error:

Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

To solve this I already used something that is like below. The useEffect runs only once and refreshes if any dependency changes, but this is not working.
20

   useEffect(() => {
        let isMounted = true;
        const cleanUp = () => {
            isMounted = false;
            dispatch(clearErrors())
        };
        if (isMounted) {
            if (error) {
                alert.error(error);
            };
        }
        return cleanUp;
    }, [dispatch, error, alert, redirect])

How to solve the error?

  • Which specific error or issue would you like help with here? Try to narrow the focus of your post to a single problem. It kind of sounds like you resolved the Redux/localStorage issue, so you need help with protecting routes? The ProtectedRoute component implementation appears to be the old React-Router v4/5 syntax.

    – 




  • @DrewReese This is the error I am facing. Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

    – 




  • What state is being updated when a component unmounts? Can you edit to remove the unrelated router/routing code and clarify what or where any state update is enqueued just prior to unmounting a component?

    – 

  • @DrewReese Done as you said. Basically, the redux state will update in every refresh and remove the recent add, it is the default behavior of the redux state, to counter this I used the local storage. When the user clicks the ‘add to cart’ button the local storage will trigger and update the details. And redux has the initial state in the store file so on that folder I used the local storage to update the details from local storage.

    – 

  • @DrewReese so whatever the local storage has it will update to the initial store of a redux app. When I was doing console.log() I found the details as expected but not in cart component. This is the issue I am facing. Because the details not found in the cart component it will update the cart component in every refresh

    – 

Leave a Comment