mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-13 02:41:50 +08:00
fix: add mountedRef guard to useWebSocket to prevent setState on unmounted component
- Add mountedRef to track component mount state in useWebSocket hook - Guard handleMessage callback to return early if component is unmounted - Set mountedRef.current = false in useEffect cleanup function This addresses finding perf-011 about potential memory leaks from setState on unmounted components. The mounted ref provides a defensive check to ensure no state updates occur after component unmount. Related: code review group G03 - Critical Memory Leaks
This commit is contained in:
@@ -38,6 +38,7 @@ export function useWebSocket(options: UseWebSocketOptions = {}): UseWebSocketRet
|
|||||||
const wsRef = useRef<WebSocket | null>(null);
|
const wsRef = useRef<WebSocket | null>(null);
|
||||||
const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||||
const reconnectDelayRef = useRef(RECONNECT_DELAY_BASE);
|
const reconnectDelayRef = useRef(RECONNECT_DELAY_BASE);
|
||||||
|
const mountedRef = useRef(true);
|
||||||
|
|
||||||
// Notification store for connection status
|
// Notification store for connection status
|
||||||
const setWsStatus = useNotificationStore((state) => state.setWsStatus);
|
const setWsStatus = useNotificationStore((state) => state.setWsStatus);
|
||||||
@@ -71,6 +72,11 @@ export function useWebSocket(options: UseWebSocketOptions = {}): UseWebSocketRet
|
|||||||
// Handle incoming WebSocket messages
|
// Handle incoming WebSocket messages
|
||||||
const handleMessage = useCallback(
|
const handleMessage = useCallback(
|
||||||
(event: MessageEvent) => {
|
(event: MessageEvent) => {
|
||||||
|
// Guard against state updates after unmount
|
||||||
|
if (!mountedRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const data = JSON.parse(event.data);
|
const data = JSON.parse(event.data);
|
||||||
|
|
||||||
@@ -391,6 +397,9 @@ export function useWebSocket(options: UseWebSocketOptions = {}): UseWebSocketRet
|
|||||||
window.addEventListener('a2ui-action', handleA2UIAction as EventListener);
|
window.addEventListener('a2ui-action', handleA2UIAction as EventListener);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
|
// Mark as unmounted to prevent state updates in handleMessage
|
||||||
|
mountedRef.current = false;
|
||||||
|
|
||||||
window.removeEventListener('a2ui-action', handleA2UIAction as EventListener);
|
window.removeEventListener('a2ui-action', handleA2UIAction as EventListener);
|
||||||
if (reconnectTimeoutRef.current) {
|
if (reconnectTimeoutRef.current) {
|
||||||
clearTimeout(reconnectTimeoutRef.current);
|
clearTimeout(reconnectTimeoutRef.current);
|
||||||
|
|||||||
Reference in New Issue
Block a user