2

The following code renders a toast:

import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

export default function App() {
  const notify = () =>
    toast.success("Yabba dabba do", {
      onClose: () => {
        console.log("closing");
      },
      autoClose: 5000
    });
  return (
    <div>
      <button onClick={notify}>Notify !</button>
      <ToastContainer />
    </div>
  );
}

However, in the console the statement "closing" outputs as soon as the toast renders and again 5 seconds later after the toast closes. How do I code it so that "closing" only outputs to the console after 5 seconds when the toast closes? Here's a Codesandbox: https://codesandbox.io/s/toast3-forked-pibtut?file=/src/App.js

Luke
  • 2,751
  • 1
  • 17
  • 20
  • 2
    it will be solved if you disable stickMode. Not sure if this is what you want. https://github.com/fkhadra/react-toastify/issues/741 – Qubaish Bhatti May 30 '22 at 05:47
  • @QubaishBhatti Bhatti oh that definitely helps! I was tearing my hair out on this. Is this a bug in React or in React-Toastify? Could I fix it by downgrading React-Toastify? If the problem is in Toastify how many versions back would I have to revert to for it to work? – Luke May 30 '22 at 06:55
  • 1
    You just need to remove stickMode. I just updated your codesandbox. https://codesandbox.io/s/toast3-forked-psudoq – Qubaish Bhatti May 30 '22 at 06:59
  • Yes I understand. I see that taking it out of strictmode fixes it per your suggestion. Do you think this will eventually be fixed so that we can reenable strictmode? – Luke May 30 '22 at 07:56
  • 1
    As per my understanding its only happening on dev environment. Once you deployed it on any prod environment this issue should not occur. – Qubaish Bhatti May 30 '22 at 08:15
  • This is also happening on useEffect. (cf https://www.codingdeft.com/posts/react-use-effect-running-twice/ ) The same kludge-fix can also be applied. – Luke Jun 03 '22 at 03:38

0 Answers0