perf(realtime): move presence state out of the socket context to stop cursor-frame re-renders

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx

@@ -5,6 +5,7 @@ import { useViewport } from 'reactflow'
 import { getUserColor } from '@/lib/workspaces/colors'
 import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
+import { usePresenceStore } from '@/stores/presence/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 interface CursorPoint {
@@ -21,7 +22,8 @@ interface CursorRenderData {
 
 const CursorsComponent = () => {
   const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
-  const { currentWorkflowId, presenceUsers, currentSocketId } = useSocket()
+  const { currentWorkflowId, currentSocketId } = useSocket()
+  const presenceUsers = usePresenceStore((state) => state.presenceUsers)
   const viewport = useViewport()
   const preventZoomRef = usePreventZoom()
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/avatars/avatars.tsx

@@ -5,6 +5,7 @@ import { Avatar, AvatarFallback, AvatarImage, Tooltip } from '@/components/emcn'
 import { getUserColor } from '@/lib/workspaces/colors'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
 import { SIDEBAR_WIDTH } from '@/stores/constants'
+import { usePresenceStore } from '@/stores/presence/store'
 import { useSidebarStore } from '@/stores/sidebar/store'
 
 /**
@@ -80,7 +81,8 @@ function UserAvatar({ user, index }: UserAvatarProps) {
  * @returns Avatar stack for workflow presence
  */
 export function Avatars({ workflowId }: AvatarsProps) {
-  const { presenceUsers, currentWorkflowId, currentSocketId } = useSocket()
+  const { currentWorkflowId, currentSocketId } = useSocket()
+  const presenceUsers = usePresenceStore((state) => state.presenceUsers)
   const sidebarWidth = useSidebarStore((state) => state.sidebarWidth)
 
   /**

apps/sim/app/workspace/providers/socket-provider.tsx

@@ -43,6 +43,8 @@ import type {
   VariableUpdateEmit,
   WorkflowOperationEmit,
 } from '@/stores/operation-queue/types'
+import { usePresenceStore } from '@/stores/presence/store'
+import type { PresenceUser } from '@/stores/presence/types'
 import { useWorkflowRegistry as useWorkflowRegistryStore } from '@/stores/workflows/registry/store'
 
 const logger = createLogger('SocketContext')
@@ -71,15 +73,6 @@ interface User {
   email?: string
 }
 
-interface PresenceUser {
-  socketId: string
-  userId: string
-  userName: string
-  avatarUrl?: string | null
-  cursor?: { x: number; y: number } | null
-  selection?: { type: 'block' | 'edge' | 'none'; id?: string }
-}
-
 interface SocketContextType {
   socket: Socket | null
   isConnected: boolean
@@ -95,7 +88,6 @@ interface SocketContextType {
   blockedJoinWorkflowId: string | null
   currentWorkflowId: string | null
   currentSocketId: string | null
-  presenceUsers: PresenceUser[]
   joinWorkflow: (workflowId: string) => void
   leaveWorkflow: () => void
   retryConnection: () => void
@@ -129,7 +121,6 @@ const SocketContext = createContext<SocketContextType>({
   blockedJoinWorkflowId: null,
   currentWorkflowId: null,
   currentSocketId: null,
-  presenceUsers: [],
   joinWorkflow: () => {},
   leaveWorkflow: () => {},
   retryConnection: () => {},
@@ -166,7 +157,6 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
   const [isRetryingWorkflowJoin, setIsRetryingWorkflowJoin] = useState(false)
   const [currentWorkflowId, setCurrentWorkflowId] = useState<string | null>(null)
   const [currentSocketId, setCurrentSocketId] = useState<string | null>(null)
-  const [presenceUsers, setPresenceUsers] = useState<PresenceUser[]>([])
   const [authFailed, setAuthFailed] = useState(false)
   const [blockedJoinWorkflowId, setBlockedJoinWorkflowId] = useState<string | null>(null)
   const [explicitWorkflowId, setExplicitWorkflowId] = useState<string | null>(null)
@@ -202,6 +192,21 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
   const positionUpdateTimeouts = useRef<Map<string, number>>(new Map())
   const pendingPositionUpdates = useRef<Map<string, any>>(new Map())
 
+  /**
+   * Presence is high-frequency (cursor frames many times per second) so it lives
+   * in {@link usePresenceStore}, not the broad socket context — writing it here no
+   * longer mints a new context value, so emitter-only `useSocket()` consumers stop
+   * re-rendering on every cursor frame. These thin wrappers delegate to the store's
+   * stable actions read via `getState()`.
+   */
+  const setPresenceUsers = useCallback((users: PresenceUser[]) => {
+    usePresenceStore.getState().setPresenceUsers(users)
+  }, [])
+
+  const updatePresenceUsers = useCallback((updater: (prev: PresenceUser[]) => PresenceUser[]) => {
+    usePresenceStore.getState().updatePresenceUsers(updater)
+  }, [])
+
   const setVisibleWorkflowId = useCallback((workflowId: string | null) => {
     currentWorkflowIdRef.current = workflowId
     setCurrentWorkflowId(workflowId)
@@ -255,7 +260,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
       setPresenceUsers([])
       setVisibleWorkflowId(null)
     },
-    [resetVisibleWorkflowState, setVisibleWorkflowId]
+    [resetVisibleWorkflowState, setPresenceUsers, setVisibleWorkflowId]
   )
 
   const executeJoinCommands = useCallback(
@@ -501,7 +506,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
             return
           }
 
-          setPresenceUsers((prev) => {
+          updatePresenceUsers((prev) => {
             const prevMap = new Map(prev.map((u) => [u.socketId, u]))
 
             return users.map((user) => {
@@ -675,7 +680,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
             return
           }
 
-          setPresenceUsers((prev) => {
+          updatePresenceUsers((prev) => {
             const existingIndex = prev.findIndex((user) => user.socketId === data.socketId)
             if (existingIndex === -1) {
               logger.debug('Received cursor-update for unknown user', { socketId: data.socketId })
@@ -693,7 +698,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
             return
           }
 
-          setPresenceUsers((prev) => {
+          updatePresenceUsers((prev) => {
             const existingIndex = prev.findIndex((user) => user.socketId === data.socketId)
             if (existingIndex === -1) {
               logger.debug('Received selection-update for unknown user', {
@@ -779,6 +784,11 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
         socketRef.current.close()
         socketRef.current = null
       }
+
+      // Presence lives in a module-global store (not provider React state), so it
+      // must be cleared explicitly on unmount/user-switch to match the prior
+      // per-provider lifetime — otherwise the previous room's collaborators linger.
+      usePresenceStore.getState().clearPresenceUsers()
     }
   }, [user?.id])
 
@@ -1116,7 +1126,6 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
       blockedJoinWorkflowId,
       currentWorkflowId,
       currentSocketId,
-      presenceUsers,
       joinWorkflow,
       leaveWorkflow,
       retryConnection,
@@ -1147,7 +1156,6 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
       blockedJoinWorkflowId,
       currentWorkflowId,
       currentSocketId,
-      presenceUsers,
       joinWorkflow,
       leaveWorkflow,
       retryConnection,

apps/sim/stores/presence/store.ts

@@ -0,0 +1,24 @@
+import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
+import type { PresenceState } from '@/stores/presence/types'
+
+/**
+ * Live collaborator presence for the active workflow room.
+ *
+ * Presence is high-frequency (cursor frames arrive many times per second), so it
+ * lives in its own store rather than the broad socket context. Only presence
+ * consumers (`<Cursors>`, `<Avatars>`) subscribe to it, so cursor frames no
+ * longer re-render emitter-only `useSocket()` consumers such as `WorkflowContent`.
+ */
+export const usePresenceStore = create<PresenceState>()(
+  devtools(
+    (set) => ({
+      presenceUsers: [],
+      setPresenceUsers: (users) => set({ presenceUsers: users }),
+      updatePresenceUsers: (updater) =>
+        set((state) => ({ presenceUsers: updater(state.presenceUsers) })),
+      clearPresenceUsers: () => set({ presenceUsers: [] }),
+    }),
+    { name: 'presence-store' }
+  )
+)

apps/sim/stores/presence/types.ts

@@ -0,0 +1,23 @@
+/**
+ * A collaborator present in the active workflow room. Mirrors the presence
+ * payload broadcast by the realtime server (`presence-update`, cursor/selection
+ * deltas, and `join-workflow-success`).
+ */
+export interface PresenceUser {
+  socketId: string
+  userId: string
+  userName: string
+  avatarUrl?: string | null
+  cursor?: { x: number; y: number } | null
+  selection?: { type: 'block' | 'edge' | 'none'; id?: string }
+}
+
+export interface PresenceState {
+  presenceUsers: PresenceUser[]
+  /** Replace the full presence list (join success, presence-update). */
+  setPresenceUsers: (users: PresenceUser[]) => void
+  /** Apply a functional update to the presence list (cursor/selection deltas). */
+  updatePresenceUsers: (updater: (prev: PresenceUser[]) => PresenceUser[]) => void
+  /** Clear presence when leaving or losing the workflow room. */
+  clearPresenceUsers: () => void
+}