Summary
Add proper cleanup for async operations in document modal components to prevent memory leaks from state updates on unmounted components.
Problem
Both DocumentChatModal and DocumentPreviewModal have useEffect hooks that trigger async operations (loadDocumentContext, loadPreview) but lack cleanup handlers. If a user closes the modal while data is loading, the component may attempt to update state after unmounting, causing memory leaks and React warnings.
Affected Files
packages/browser-app/src/components/DocumentChatModal.tsx (lines 69-71)
packages/browser-app/src/components/DocumentPreviewModal.tsx (lines 80-82)
Proposed Solution
Implement AbortController pattern for async cleanup:
useEffect(() => {
const abortController = new AbortController()
const loadData = async () => {
try {
setLoading(true)
setError(null)
// Pass signal to API calls
const data = await bioFilesApi.getSummary(fileId, {
signal: abortController.signal
})
// Check if aborted before state updates
if (!abortController.signal.aborted) {
setMessages([introMessage])
}
} catch (err) {
if (err.name === 'AbortError') return // Ignore abort errors
if (!abortController.signal.aborted) {
setError(err instanceof Error ? err.message : 'Failed to load')
}
} finally {
if (!abortController.signal.aborted) {
setLoading(false)
}
}
}
loadData()
return () => {
abortController.abort()
}
}, [fileId])
Implementation Checklist
Additional Context
This is part of PR #57 review feedback. Related to proper resource cleanup and preventing memory leaks in React components.
Priority
Medium - Prevents memory leaks but doesn't affect core functionality
Parent Issue
Part of PR #57 review feedback: #57
Summary
Add proper cleanup for async operations in document modal components to prevent memory leaks from state updates on unmounted components.
Problem
Both DocumentChatModal and DocumentPreviewModal have useEffect hooks that trigger async operations (loadDocumentContext, loadPreview) but lack cleanup handlers. If a user closes the modal while data is loading, the component may attempt to update state after unmounting, causing memory leaks and React warnings.
Affected Files
packages/browser-app/src/components/DocumentChatModal.tsx(lines 69-71)packages/browser-app/src/components/DocumentPreviewModal.tsx(lines 80-82)Proposed Solution
Implement AbortController pattern for async cleanup:
Implementation Checklist
Additional Context
This is part of PR #57 review feedback. Related to proper resource cleanup and preventing memory leaks in React components.
Priority
Medium - Prevents memory leaks but doesn't affect core functionality
Parent Issue
Part of PR #57 review feedback: #57