reactjsreact-toastify

React toastify toast appears 4 times with every single call

I recently started using react-toastify and everything worked fine until I noticed this odd behavior.

Here is my code: this.adderrorNotification('Error: Please try again!')

adderrorNotification(message){ 
 toast.error(message, { 
   onClose: () => console.log('called when I close') 
 }); 
}

enter image description here

Up on toast onClose I see the log message 4 times. and up on manual close click the toast re-appears 4 times.

Why is this happening ? Any help Thanks

Solution

  • Answering my own question:

    Cause: Initialized the toast in all my components which was causing the issue. (Sidebar, Navbar, Main component, Footer) which is making that render 4 times.

    Solution: Removing the toast initialization in all components and initialized it in the index.js solved my issue.