diff --git a/querybook/webapp/components/CodeMirrorTooltip/CodeMirrorTooltip.tsx b/querybook/webapp/components/CodeMirrorTooltip/CodeMirrorTooltip.tsx
index 995288d53..5782b54fd 100644
--- a/querybook/webapp/components/CodeMirrorTooltip/CodeMirrorTooltip.tsx
+++ b/querybook/webapp/components/CodeMirrorTooltip/CodeMirrorTooltip.tsx
@@ -20,7 +20,7 @@ export interface ICodeMirrorTooltipProps {
     suggestionText?: string;
 
     openTableModal?: () => any;
-    onAcceptSuggestion?: () => void;
+    onAcceptSuggestion?: (suggestion: string) => void;
     hide: () => any;
 }
 
diff --git a/querybook/webapp/components/CodeMirrorTooltip/SuggestionTooltip.tsx b/querybook/webapp/components/CodeMirrorTooltip/SuggestionTooltip.tsx
index 1c961a1ad..302f0039a 100644
--- a/querybook/webapp/components/CodeMirrorTooltip/SuggestionTooltip.tsx
+++ b/querybook/webapp/components/CodeMirrorTooltip/SuggestionTooltip.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Button } from 'ui/Button/Button';
 
 interface IProps {
     suggestionText: string;
-    onAcceptSuggestion: () => void;
+    onAcceptSuggestion: (suggestion: string) => void;
 }
 
 const SUGGESTION_MAX_LENGTH = 20;
@@ -12,10 +12,17 @@ export const SuggestionTooltip: React.FunctionComponent<IProps> = ({
     suggestionText,
     onAcceptSuggestion,
 }) => {
-    const truncatedSuggestion =
-        suggestionText.length > SUGGESTION_MAX_LENGTH
-            ? suggestionText.slice(0, SUGGESTION_MAX_LENGTH) + '...'
-            : suggestionText;
+    const truncatedSuggestion = useMemo(
+        () =>
+            suggestionText.length > SUGGESTION_MAX_LENGTH
+                ? suggestionText.slice(0, SUGGESTION_MAX_LENGTH - 3) + '...'
+                : suggestionText,
+        [suggestionText]
+    );
+
+    const onClick = useCallback(() => {
+        onAcceptSuggestion(suggestionText);
+    }, [onAcceptSuggestion, suggestionText]);
 
     return (
         <div className="rich-text-content">
@@ -25,7 +32,7 @@ export const SuggestionTooltip: React.FunctionComponent<IProps> = ({
             <div className="mt8 right-align">
                 <Button
                     title="Accept"
-                    onClick={onAcceptSuggestion}
+                    onClick={onClick}
                     theme="fill"
                     color="confirm"
                     icon="Check"
diff --git a/querybook/webapp/components/QueryEditor/QueryEditor.tsx b/querybook/webapp/components/QueryEditor/QueryEditor.tsx
index acd4fd48f..bc62326e5 100644
--- a/querybook/webapp/components/QueryEditor/QueryEditor.tsx
+++ b/querybook/webapp/components/QueryEditor/QueryEditor.tsx
@@ -22,6 +22,7 @@ import {
 import { useAutoComplete } from 'hooks/queryEditor/useAutoComplete';
 import { useCodeAnalysis } from 'hooks/queryEditor/useCodeAnalysis';
 import { useLint } from 'hooks/queryEditor/useLint';
+import { useDebouncedFn } from 'hooks/useDebouncedFn';
 import CodeMirror, { CodeMirrorKeyMap } from 'lib/codemirror';
 import { SQL_JINJA_MODE } from 'lib/codemirror/codemirror-mode';
 import {
@@ -378,95 +379,87 @@ export const QueryEditor: React.FC<
             [language, functionDocumentationByNameByLanguage]
         );
 
-        const onTextHoverLongDebounce = useMemo(
-            () =>
-                debounce(
-                    async (editor: CodeMirror.Editor, node, e, pos, token) => {
-                        if (
-                            markerRef.current == null &&
-                            (token.type === 'variable-2' || token.type == null)
-                        ) {
-                            // Check if token is inside a table
-                            const tokenInsideTable = await isTokenInTable(
-                                pos,
-                                token
+        const onTextHoverLongDebounce = useDebouncedFn(
+            async (editor: CodeMirror.Editor, node, e, pos, token) => {
+                if (
+                    markerRef.current == null &&
+                    (token.type === 'variable-2' || token.type == null)
+                ) {
+                    // Check if token is inside a table
+                    const tokenInsideTable = await isTokenInTable(pos, token);
+                    const markTextFrom = {
+                        line: pos.line,
+                        ch: token.start,
+                    };
+                    const markTextTo = {
+                        line: pos.line,
+                        ch: token.end,
+                    };
+                    if (tokenInsideTable) {
+                        const { tableInfo } = tokenInsideTable;
+                        if (tableInfo) {
+                            markTextAndShowTooltip(
+                                editor,
+                                markTextFrom,
+                                markTextTo,
+                                {
+                                    tableId: tableInfo.id,
+                                    openTableModal: () =>
+                                        openTableModal(tableInfo.id),
+                                }
                             );
-                            const markTextFrom = {
-                                line: pos.line,
-                                ch: token.start,
-                            };
-                            const markTextTo = {
-                                line: pos.line,
-                                ch: token.end,
-                            };
-                            if (tokenInsideTable) {
-                                const { tableInfo } = tokenInsideTable;
-                                if (tableInfo) {
-                                    markTextAndShowTooltip(
-                                        editor,
-                                        markTextFrom,
-                                        markTextTo,
-                                        {
-                                            tableId: tableInfo.id,
-                                            openTableModal: () =>
-                                                openTableModal(tableInfo.id),
-                                        }
-                                    );
-                                } else {
-                                    markTextAndShowTooltip(
-                                        editor,
-                                        markTextFrom,
-                                        markTextTo,
-                                        {
-                                            error: 'Table does not exist!',
-                                        }
-                                    );
+                        } else {
+                            markTextAndShowTooltip(
+                                editor,
+                                markTextFrom,
+                                markTextTo,
+                                {
+                                    error: 'Table does not exist!',
                                 }
-                            }
+                            );
+                        }
+                    }
 
-                            const nextChar = editor.getDoc().getLine(pos.line)[
-                                token.end
-                            ];
-                            if (nextChar === '(') {
-                                // if it seems like a function call
-                                const functionDef = matchFunctionWithDefinition(
-                                    token.string
-                                );
-                                if (functionDef) {
-                                    markTextAndShowTooltip(
-                                        editor,
-                                        markTextFrom,
-                                        markTextTo,
-                                        {
-                                            functionDocumentations: functionDef,
-                                        }
-                                    );
+                    const nextChar = editor.getDoc().getLine(pos.line)[
+                        token.end
+                    ];
+                    if (nextChar === '(') {
+                        // if it seems like a function call
+                        const functionDef = matchFunctionWithDefinition(
+                            token.string
+                        );
+                        if (functionDef) {
+                            markTextAndShowTooltip(
+                                editor,
+                                markTextFrom,
+                                markTextTo,
+                                {
+                                    functionDocumentations: functionDef,
                                 }
-                            }
+                            );
                         }
-                    },
-                    600
-                ),
+                    }
+                }
+            },
+            600,
             [isTokenInTable, matchFunctionWithDefinition, openTableModal]
         );
 
-        const onTextHoverShortDebounce = useMemo(
-            () =>
-                debounce((editor: CodeMirror.Editor, node, e, pos, _token) => {
-                    if (markerRef.current == null) {
-                        const suggestionAnnotation =
-                            getSuggestionByPosition(pos);
-                        if (suggestionAnnotation != null) {
-                            const { suggestion, from, to } =
-                                suggestionAnnotation;
-                            markTextAndShowTooltip(editor, from, to, {
-                                onAcceptSuggestion: () =>
-                                    editor.replaceRange(suggestion, from, to),
-                                suggestionText: suggestion,
-                            });
-                        }
+        const onTextHoverShortDebounce = useDebouncedFn(
+            (editor: CodeMirror.Editor, node, e, pos, _token) => {
+                if (markerRef.current == null) {
+                    const suggestionAnnotation = getSuggestionByPosition(pos);
+                    if (suggestionAnnotation != null) {
+                        const { suggestion, from, to } = suggestionAnnotation;
+                        markTextAndShowTooltip(editor, from, to, {
+                            onAcceptSuggestion: (suggestion: string) =>
+                                editor.replaceRange(suggestion, from, to),
+                            suggestionText: suggestion,
+                        });
                     }
-                }, 100),
+                }
+            },
+            100,
             [getSuggestionByPosition]
         );
 
diff --git a/querybook/webapp/hooks/useDebouncedFn.ts b/querybook/webapp/hooks/useDebouncedFn.ts
new file mode 100644
index 000000000..9d11d3855
--- /dev/null
+++ b/querybook/webapp/hooks/useDebouncedFn.ts
@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import { debounce } from 'lodash';
+
+export function useDebouncedFn<F extends (...args: any) => any>(
+    fn: F,
+    timeout: number,
+    deps: any[]
+) {
+    return useMemo(() => debounce(fn, timeout), deps);
+}