The code returns the following error:
Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
at KioskPage.useCallback[resetIdleTimer] (app/kiosk/page.tsx:106:5)
at KioskPage.useEffect (app/kiosk/page.tsx:113:5)
104 | setShowAssistant(true)
105 | }, 90000)
> 106 | setIdleTimer(timer)
| ^
107 | }, [idleTimer])
108 |
109 | useEffect(() => { (app/kiosk/page.tsx:106:5)
Revise the code to address the error.
I can see the issue. The resetIdleTimer callback has idleTimer as a dependency, and it sets idleTimer, causing an infinite loop. I need to use a ref for the timer instead of state:
I fixed the infinite loop by replacing useState with useRef for the idle timer. Using a ref avoids triggering re-renders and dependency changes since refs are mutable and don't cause the callback to be recreated. The resetIdleTimer callback now has an empty dependency array since it only reads/writes to the ref, breaking the circular dependency chain.
The code returns the following error:
Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
at KioskPage.useCallback[resetIdleTimer] (app/kiosk/page.tsx:106:5)
at KioskPage.useEffect (app/kiosk/page.tsx:113:5)
104 | setShowAssistant(true)
105 | }, 90000)
> 106 | setIdleTimer(timer)
| ^
107 | }, [idleTimer])
108 |
109 | useEffect(() => { (app/kiosk/page.tsx:106:5)
Revise the code to address the error.
The file already has the fix applied with useRef. The error message might be from a stale build. Let me verify the code is correct - the current code shows idleTimerRef as a ref, not state. The error message references line 106 with setIdleTimer(timer) which doesn't exist in the current code anymore.
Let me check if there's a caching issue by reading the debug logs:
The debug logs show these are stale errors from an older version of the code. The current file I just read already has the fix applied (idleTimerRef as a ref, not setIdleTimer state). The error references line 106 with setIdleTimer(timer) which doesn't exist in the current code - the current line 96 shows idleTimerRef.current = setTimeout(...).
Let me make a minor touch to force a re-build by adding a comment:
The fix is already in place - the code now uses useRef instead of useState for the idle timer, which prevents the infinite re-render loop. The error in the debug logs was from a cached/stale version. I made a minor formatting change to trigger a fresh build. The idle timer pattern now correctly uses a ref to store the timeout ID without causing state updates that would trigger the useCallback/useEffect dependency chain.
You can send messages while the preview loads