diff --git a/components/Toast.tsx b/components/Toast.tsx index f176fae..2c627e2 100644 --- a/components/Toast.tsx +++ b/components/Toast.tsx @@ -1,6 +1,6 @@ 'use client' -import { useEffect } from 'react' +import { useEffect, useRef } from 'react' import { CheckCircle, XCircle, AlertCircle, X } from 'lucide-react' export type ToastType = 'success' | 'error' | 'info' @@ -13,19 +13,26 @@ interface ToastProps { } export default function Toast({ message, type, onClose, duration = 3000 }: ToastProps) { + const onCloseRef = useRef(onClose) + + // Keep the ref updated + useEffect(() => { + onCloseRef.current = onClose + }, [onClose]) + useEffect(() => { if (duration > 0) { console.log(`[Toast] Setting timer for ${duration}ms`) const timer = setTimeout(() => { console.log('[Toast] Auto-dismissing') - onClose() + onCloseRef.current() }, duration) return () => { console.log('[Toast] Clearing timer') clearTimeout(timer) } } - }, [duration, onClose]) + }, [duration]) const icons = { success: ,