Ensure that all callbacks for useEventListener are wrapped in useCallback (#22618)

GitOrigin-RevId: 4a7c409a9720eab04fc17e5111b6a3aeeac6871d

services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx

@@ -617,17 +617,26 @@ export const EditorManagerProvider: FC = ({ children }) => {
     t,
   ])
 
-  useEventListener('editor:insert-symbol', () => {
-    sendMB('symbol-palette-insert')
-  })
+  useEventListener(
+    'editor:insert-symbol',
+    useCallback(() => {
+      sendMB('symbol-palette-insert')
+    }, [])
+  )
 
-  useEventListener('flush-changes', () => {
-    openDocs.flushAll()
-  })
+  useEventListener(
+    'flush-changes',
+    useCallback(() => {
+      openDocs.flushAll()
+    }, [openDocs])
+  )
 
-  useEventListener('blur', () => {
-    openDocs.flushAll()
-  })
+  useEventListener(
+    'blur',
+    useCallback(() => {
+      openDocs.flushAll()
+    }, [openDocs])
+  )
 
   // Flush changes before disconnecting
   useEffect(() => {

services/web/frontend/js/features/ide-react/context/references-context.tsx

@@ -101,9 +101,12 @@ export const ReferencesProvider: FC = ({ children }) => {
     }
   }, [eventEmitter, fileTreeData, indexReferencesIfDocModified])
 
-  useEventListener('reference:added', function () {
-    indexAllReferences(true)
-  })
+  useEventListener(
+    'reference:added',
+    useCallback(() => {
+      indexAllReferences(true)
+    }, [indexAllReferences])
+  )
 
   useEffect(() => {
     const handleProjectJoined = () => {

services/web/frontend/js/features/ide-react/hooks/use-has-linting-error.ts

@@ -1,12 +1,19 @@
 import useEventListener from '@/shared/hooks/use-event-listener'
 import { useLocalCompileContext } from '@/shared/context/local-compile-context'
+import { useCallback } from 'react'
 
 export function useHasLintingError() {
   const { setHasLintingError } = useLocalCompileContext()
 
   // Listen for editor:lint event from CM6 linter and keep compile context
   // up to date
-  useEventListener('editor:lint', (event: CustomEvent) => {
-    setHasLintingError(event.detail.hasLintingError)
-  })
+  useEventListener(
+    'editor:lint',
+    useCallback(
+      (event: CustomEvent) => {
+        setHasLintingError(event.detail.hasLintingError)
+      },
+      [setHasLintingError]
+    )
+  )
 }

services/web/frontend/js/features/source-editor/components/paste-html/pasted-content-menu.tsx

@@ -37,9 +37,12 @@ export const PastedContentMenu: FC<{
 
   // record whether the Shift key is currently down, for use in the `paste` event handler
   const shiftRef = useRef(false)
-  useEventListener('keydown', (event: KeyboardEvent) => {
-    shiftRef.current = event.shiftKey
-  })
+  useEventListener(
+    'keydown',
+    useCallback((event: KeyboardEvent) => {
+      shiftRef.current = event.shiftKey
+    }, [])
+  )
 
   // track interaction events
   const trackedEventsRef = useRef<Record<string, boolean>>({