I have a button to add an item to a wishlist, so when the user clicks on that button, it triggers a process of showing and hiding a snackbar, telling the user the item has been saved successfully. I have a component called AlertWishlist, and from the parent I set a prop called closeWishlistNotification, that basically executes a timeout function to wait 5 seconds and then close the snackbar.

The snackbar itself is based on a state variable called isOpen, a boolean that defines if show or hide the snackbar (if it is true, display, if it is false, hide).

However, the button can be clicked again to remove the item from the wishlist, and this action triggers basically the same process I mentioned before, the only difference is the message the snackbar shows, now saying "Item has been eliminated from wishlist".With all of this, I ended up having this behavior:

• User clicks button, item is now saved to the wishlist.
• isOpen = true, display snackbar to notify item added, and start timeout (5 seconds).
• AT THIS MOMENT, TIMEOUT IS ALREADY 2 SECONDS: User clicks button again, item is now removed from the wishlist.
• isOpen still true, display snackbar to notify item removed, and start timeout (5 seconds);
• AT THIS MOMENT, FIRST TIMEOUT HAS BEEN COMPLETED, change isOpen variable to false (because we need to close snackbar)
• isOpen = false, AT THIS MOMENT, SECOND TIMEOUT IS ALREADY 2 SECONDS, but since isOpen is false, HIDE SNACKBAR.

What I really want is the snackbar to wait 5 seconds always, and if it changes, for example, if the snackbar "Item has been added" is showed and before 5 seconds the snackbar "Item has been removed" replace the first one, then start the time count again.

I am not shure if this question has been answered before since I don't know how to ask properly if I reduce this to pure react, So I decided to use the problem I am having as an example and provide the most possible details.

Any help is appreciated, thanks.