Cleaning up state on useEffect hook

Question

Can someone give me a light on what may be happening here? I have an effect that basically, when I load a product page it updates an state with an array of items, but when I change the product (a prop) it's not cleaning up my state. The code is below, can someone see what may be missing?

const [cartItems, setCartItems] = useState<any>([]);
useEffect(() => {
    if (product) {
      handleCartArray(product.name, variant.sku, variant.price, product.productId);
    }
    return () => {
      console.log('is this running?');

      cleanCartItems();
    };
  }, [product]);

  function cleanCartItems() {
    console.log('I am trying to clean the cart items');
    setCartItems([]);
  }

Not really much to be added here. I am trying to clean up this state everytime a new product is loaded, but it isn't working.

Can you share the way you defined "product"? In case it is a plain variable, converting it to a state variable may solve the problem you are facing. In any case, please let me whether or not the change worked if/when you make the change. — Suryasish Paul, Jul 12 '23 at 14:19
Please read how to make a [mre]. Leaving out relevant parts of your code makes it much harder for people to help and forces them to guess. — super, Jul 12 '23 at 14:34

score 1 · Answer 1 · answered Jul 12 '23 at 14:31

1

Make sure that your useEffect hook is running (you haven't explained what product is, so I'm not even sure it's running). Also how about calling setCartItems([]) inside the the return statement in useEffect itself? The arrow statement is a function itself, right now it's literally a function only being used to callback another function.

answered Jul 12 '23 at 14:31

Sina Haghshenas

28
6

Yeah, thought of the same -- calling setCartItems([]) within useEffect but decided not to follow through with that thought as the code is most probably, as it should be, an MRE. But in any case, that would be a good move. – Suryasish Paul Jul 12 '23 at 14:36
Hey there! Thanks for the replies. Actually yea, I didn't put what product is, it's actually a prop, passed by when a product is selected on a store front. So, to be sure, I've added the console.logs and all of them run (I mean, the product changes and the 'I am trying to clean the cart items' shows up, but the setCartItems([]) appears to be not running. I am updating the question with the latest code and the console as well – Felipe Lemos Jul 13 '23 at 07:12
@SuryasishPaul Didn't thought of that, thank you for the comment! – Sina Haghshenas Jul 13 '23 at 10:08
@FelipeLemos Not sure why that's happening but maybe this can prove useful? [The useState set method is not reflecting a change immediately](https://stackoverflow.com/a/58877875/20717109) – Sina Haghshenas Jul 13 '23 at 10:09

score 0 · Answer 2 · answered Jul 12 '23 at 14:17

useEffect dependencies only fire up the code within when the state of one/all of the dependencies changes. In your case product seems like a simple variable. Define product using useState or some centralised state management system and your useEffect will work perfectly. Good luck!

Cleaning up state on useEffect hook

2 Answers2