From 4384f80f9b33dcd9595b3276c9017ca8a52da1d4 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Wed, 18 May 2022 10:26:48 -0500
Subject: [PATCH] terminal: move handleKeyDown inside of useEffect()

This will avoid extra renders triggered by a new handleKeyDown function.
---
 src/terminal/Terminal.tsx | 44 +++++++++++++++++++--------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/terminal/Terminal.tsx b/src/terminal/Terminal.tsx
index f13b2574..504f946a 100644
--- a/src/terminal/Terminal.tsx
+++ b/src/terminal/Terminal.tsx
@@ -133,29 +133,29 @@ const Terminal: React.FC = (_props) => {
         };
     }, [isDarkMode]);
 
-    const handleKeyDownEvent = (e: KeyboardEvent): void => {
-        // implement CTRL+SHIFT+C keyboard shortcut for copying text from terminal
-        if (e.key === 'C' && e.ctrlKey && e.shiftKey && !e.altKey && !e.metaKey) {
-            // this would otherwise open up debug console in web browser
-            e.preventDefault();
-
-            if (
-                document.hasFocus() &&
-                document.activeElement ===
-                    terminalRef.current?.getElementsByClassName(
-                        'xterm-helper-textarea',
-                    )[0] &&
-                xterm.hasSelection()
-            ) {
-                navigator.clipboard.writeText(xterm.getSelection());
-            }
-        }
-    };
-
     useEffect(() => {
-        window.addEventListener('keydown', handleKeyDownEvent);
-        return () => window.removeEventListener('keydown', handleKeyDownEvent);
-    }, [handleKeyDownEvent]);
+        const handleKeyDown = (e: KeyboardEvent): void => {
+            // implement CTRL+SHIFT+C keyboard shortcut for copying text from terminal
+            if (e.key === 'C' && e.ctrlKey && e.shiftKey && !e.altKey && !e.metaKey) {
+                // this would otherwise open up debug console in web browser
+                e.preventDefault();
+
+                if (
+                    document.hasFocus() &&
+                    document.activeElement ===
+                        terminalRef.current?.getElementsByClassName(
+                            'xterm-helper-textarea',
+                        )[0] &&
+                    xterm.hasSelection()
+                ) {
+                    navigator.clipboard.writeText(xterm.getSelection());
+                }
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [terminalRef, xterm]);
 
     // wire shared context to terminal output
     useEffect(() => {