diff --git a/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx b/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx index 82c822f773..8781af8e3e 100644 --- a/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx +++ b/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(() => { diff --git a/services/web/frontend/js/features/ide-react/context/references-context.tsx b/services/web/frontend/js/features/ide-react/context/references-context.tsx index 3be3b31944..0c83a7ad21 100644 --- a/services/web/frontend/js/features/ide-react/context/references-context.tsx +++ b/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 = () => { diff --git a/services/web/frontend/js/features/ide-react/hooks/use-has-linting-error.ts b/services/web/frontend/js/features/ide-react/hooks/use-has-linting-error.ts index 266fc1fedb..0958ddf768 100644 --- a/services/web/frontend/js/features/ide-react/hooks/use-has-linting-error.ts +++ b/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] + ) + ) } diff --git a/services/web/frontend/js/features/source-editor/components/paste-html/pasted-content-menu.tsx b/services/web/frontend/js/features/source-editor/components/paste-html/pasted-content-menu.tsx index d026590fc4..807b20c9f4 100644 --- a/services/web/frontend/js/features/source-editor/components/paste-html/pasted-content-menu.tsx +++ b/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>({