Merge pull request #16010 from overleaf/ae-socket-listeners-usecallback

[ide-react] Wrap socket listeners in useCallback

GitOrigin-RevId: 09692ac0026b6f94626eece4583ae320039a4ee9

services/web/frontend/js/features/ide-react/hooks/use-socket-listeners.ts

@@ -9,6 +9,8 @@ import { useConnectionContext } from '@/features/ide-react/context/connection-co
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
 import { useModalsContext } from '@/features/ide-react/context/modals-context'
 import { debugConsole } from '@/utils/debugging'
+import { useCallback } from 'react'
+import { PublicAccessLevel } from '../../../../../types/public-access-level'
 
 function useSocketListeners() {
   const { t } = useTranslation()
@@ -19,46 +21,64 @@ function useSocketListeners() {
   const [, setProjectMembers] = useScopeValue('project.members')
   const [, setProjectInvites] = useScopeValue('project.invites')
 
-  useSocketListener(socket, 'project:access:revoked', () => {
-    showGenericMessageModal(
-      t('removed_from_project'),
-      t(
-        'you_have_been_removed_from_this_project_and_will_be_redirected_to_project_dashboard'
+  useSocketListener(
+    socket,
+    'project:access:revoked',
+    useCallback(() => {
+      showGenericMessageModal(
+        t('removed_from_project'),
+        t(
+          'you_have_been_removed_from_this_project_and_will_be_redirected_to_project_dashboard'
+        )
       )
-    )
-  })
+    }, [showGenericMessageModal, t])
+  )
 
-  useSocketListener(socket, 'project:publicAccessLevel:changed', data => {
-    if (data.newAccessLevel) {
-      setPublicAccessLevel(data.newAccessLevel)
-    }
-  })
+  useSocketListener(
+    socket,
+    'project:publicAccessLevel:changed',
+    useCallback(
+      (data: { newAccessLevel?: PublicAccessLevel }) => {
+        if (data.newAccessLevel) {
+          setPublicAccessLevel(data.newAccessLevel)
+        }
+      },
+      [setPublicAccessLevel]
+    )
+  )
 
-  useSocketListener(socket, 'project:membership:changed', data => {
-    if (data.members) {
-      listProjectMembers(projectId)
-        .then(({ members }) => {
-          if (members) {
-            setProjectMembers(members)
-          }
-        })
-        .catch(err => {
-          debugConsole.error('Error fetching members for project', err)
-        })
-    }
+  useSocketListener(
+    socket,
+    'project:membership:changed',
+    useCallback(
+      (data: { members?: boolean; invites?: boolean }) => {
+        if (data.members) {
+          listProjectMembers(projectId)
+            .then(({ members }) => {
+              if (members) {
+                setProjectMembers(members)
+              }
+            })
+            .catch(err => {
+              debugConsole.error('Error fetching members for project', err)
+            })
+        }
 
-    if (data.invites) {
-      listProjectInvites(projectId)
-        .then(({ invites }) => {
-          if (invites) {
-            setProjectInvites(invites)
-          }
-        })
-        .catch(err => {
-          debugConsole.error('Error fetching invites for project', err)
-        })
-    }
-  })
+        if (data.invites) {
+          listProjectInvites(projectId)
+            .then(({ invites }) => {
+              if (invites) {
+                setProjectInvites(invites)
+              }
+            })
+            .catch(err => {
+              debugConsole.error('Error fetching invites for project', err)
+            })
+        }
+      },
+      [projectId, setProjectInvites, setProjectMembers]
+    )
+  )
 }
 
 export default useSocketListeners