diff --git a/packages/editor/src/core/hooks/use-collaborative-editor.ts b/packages/editor/src/core/hooks/use-collaborative-editor.ts
index 798581b3712..5bee8c0c3f5 100644
--- a/packages/editor/src/core/hooks/use-collaborative-editor.ts
+++ b/packages/editor/src/core/hooks/use-collaborative-editor.ts
@@ -55,7 +55,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
         },
         onSynced: () => setHasServerSynced(true),
       }),
-    [id, realtimeConfig, serverHandler, user.id]
+    [id, realtimeConfig, serverHandler, user]
   );
 
   // destroy and disconnect connection on unmount
diff --git a/web/core/components/pages/editor/editor-body.tsx b/web/core/components/pages/editor/editor-body.tsx
index 37ce3ac48ec..0d299104fc4 100644
--- a/web/core/components/pages/editor/editor-body.tsx
+++ b/web/core/components/pages/editor/editor-body.tsx
@@ -149,6 +149,15 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     }
   }, [projectId, workspaceSlug]);
 
+  const userConfig = useMemo(
+    () => ({
+      id: currentUser?.id ?? "",
+      name: currentUser?.display_name ?? "",
+      color: generateRandomColor(currentUser?.id ?? ""),
+    }),
+    [currentUser]
+  );
+
   if (pageId === undefined || !realtimeConfig) return <PageContentLoader />;
 
   return (
@@ -214,11 +223,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
               }}
               realtimeConfig={realtimeConfig}
               serverHandler={serverHandler}
-              user={{
-                id: currentUser?.id ?? "",
-                name: currentUser?.display_name ?? "",
-                color: generateRandomColor(currentUser?.id ?? ""),
-              }}
+              user={userConfig}
               disabledExtensions={documentEditor}
               aiHandler={{
                 menu: getAIMenu,
@@ -245,11 +250,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                 },
               }}
               realtimeConfig={realtimeConfig}
-              user={{
-                id: currentUser?.id ?? "",
-                name: currentUser?.display_name ?? "",
-                color: generateRandomColor(currentUser?.id ?? ""),
-              }}
+              user={userConfig}
             />
           )}
         </div>