Show floating scroll-to-bottom button in chat pane #186
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| setTimeout(() => { | ||
| const container = scrollContainerRef.current | ||
| if (container) { | ||
| const nearBottom = isNearBottom() | ||
| setShowScrollButton(!nearBottom) | ||
| } | ||
| }, 100) |
There was a problem hiding this comment.
| setTimeout(() => { | |
| const container = scrollContainerRef.current | |
| if (container) { | |
| const nearBottom = isNearBottom() | |
| setShowScrollButton(!nearBottom) | |
| } | |
| }, 100) | |
| const timeout = setTimeout(() => { | |
| const container = scrollContainerRef.current | |
| if (container) { | |
| const nearBottom = isNearBottom() | |
| setShowScrollButton(!nearBottom) | |
| } | |
| }, 100) | |
| return () => clearTimeout(timeout) |
The second useEffect schedules a timeout to update scroll button visibility but doesn't provide a cleanup function to cancel it, which can cause state update warnings on component unmount and potential memory issues if messages change frequently.
View Details
Analysis
Missing cleanup function in useEffect with setTimeout schedules duplicate scroll button updates
What fails: The useEffect hook starting at line 366 in components/task-chat.tsx schedules a setTimeout without returning a cleanup function to cancel it. When dependencies (messages or activeTab) change, previous timeouts remain pending and can accumulate, causing redundant setState calls and violating React's official guidance on synchronizing with effects.
How to reproduce:
- Open a task in the chat interface
- Switch to another tab and back to 'chat' (triggers activeTab dependency change)
- Receive new messages frequently (triggers messages dependency change)
- Without cleanup, multiple setTimeout callbacks accumulate and each fires its own setShowScrollButton call within a short timeframe
Result: Multiple timeouts execute independently, each calling setShowScrollButton redundantly. According to React documentation, the cleanup function should mirror the Effect's setup—when a timeout is scheduled, it must be cancelled by the cleanup function.
Expected: Each useEffect invocation should return a cleanup function that calls clearTimeout() on the scheduled timeout, matching the pattern shown in React's recommended approach and the existing pattern in the same codebase at repo-selector.tsx line 203.
No description provided.