From 8f2a902e07c09111fa3e8b47f6cb4f798ef8ff49 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 28 Mar 2026 15:08:54 +0000
Subject: [PATCH 1/2] Initial plan


From 82815f6efaa8f96c067102c55959f53956db39de Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 28 Mar 2026 15:11:39 +0000
Subject: [PATCH 2/2] fix: replace unconventional useRef+useMemo pattern with
 useState+useEffect in useWebSocket demo

Agent-Logs-Url: https://github.com/alibaba/hooks/sessions/1a77d062-ee53-4401-83fa-2872626cf1b1

Co-authored-by: crazylxr <16161407+crazylxr@users.noreply.github.com>
---
 packages/hooks/src/useWebSocket/demo/demo1.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/hooks/src/useWebSocket/demo/demo1.tsx b/packages/hooks/src/useWebSocket/demo/demo1.tsx
index e003863499..d958e1c628 100644
--- a/packages/hooks/src/useWebSocket/demo/demo1.tsx
+++ b/packages/hooks/src/useWebSocket/demo/demo1.tsx
@@ -1,4 +1,4 @@
-import { useRef, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import { useWebSocket } from 'ahooks';
 
 enum ReadyState {
@@ -9,16 +9,17 @@ enum ReadyState {
 }
 
 export default () => {
-  const messageHistory = useRef<any[]>([]);
+  const [messageHistory, setMessageHistory] = useState<WebSocketEventMap['message'][]>([]);
 
   const { readyState, sendMessage, latestMessage, disconnect, connect } = useWebSocket(
     'wss://ws.postman-echo.com/raw',
   );
 
-  messageHistory.current = useMemo(
-    () => messageHistory.current.concat(latestMessage),
-    [latestMessage],
-  );
+  useEffect(() => {
+    if (latestMessage !== undefined) {
+      setMessageHistory((prev) => [...prev, latestMessage]);
+    }
+  }, [latestMessage]);
 
   return (
     <div>
@@ -45,7 +46,7 @@ export default () => {
       <div style={{ marginTop: 8 }}>readyState: {readyState}</div>
       <div style={{ marginTop: 8 }}>
         <p>received message: </p>
-        {messageHistory.current.map((message, index) => (
+        {messageHistory.map((message, index) => (
           <p key={index} style={{ wordWrap: 'break-word' }}>
             {message?.data}
           </p>