diff --git a/src/components/ui/Toast.jsx b/src/components/ui/Toast.jsx index a876d0f..ae60fa6 100644 --- a/src/components/ui/Toast.jsx +++ b/src/components/ui/Toast.jsx @@ -1,12 +1,25 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useRef } from "react"; import { motion } from "framer-motion"; export const Toast = ({ message, type = "success", onClose }) => { + // Keep the latest onClose in a ref so the auto-dismiss timer always calls + // the most recent callback without onClose needing to be a reactive + // dependency. This prevents the 3-second timer from resetting every time + // the parent re-renders and passes a new inline onClose function. + const onCloseRef = useRef(onClose); + useEffect(() => { - const timer = setTimeout(onClose, 3000); - return () => clearTimeout(timer); + onCloseRef.current = onClose; }, [onClose]); + useEffect(() => { + const timer = setTimeout(() => { + onCloseRef.current(); + }, 3000); + return () => clearTimeout(timer); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + return ( { ); }; -export default Toast; \ No newline at end of file +export default Toast;