MISC: enforce eslint react checks (#640)

src/ScriptEditor/ui/Editor.tsx

@@ -46,6 +46,9 @@ export function Editor({ beforeMount, onMount, onChange }: EditorProps) {
       editorRef.current?.getModel()?.dispose();
       editorRef.current?.dispose();
     };
+    // this eslint ignore instruction can potentially cause unobvious bugs
+    // (e.g. if `onChange` starts using a prop or state in parent component).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return <div ref={containerDiv} style={{ height: "1px", width: "100%", flexGrow: 1 }} />;

src/ScriptEditor/ui/ScriptEditorRoot.tsx

@@ -77,14 +77,6 @@ function Root(props: IProps): React.ReactElement {
     currentScript = openScripts[0] ?? null;
   }
 
-  useEffect(() => {
-    if (currentScript !== null) {
-      const tabIndex = currentTabIndex();
-      if (typeof tabIndex === "number") onTabClick(tabIndex);
-      parseCode(currentScript.code);
-    }
-  }, []);
-
   useEffect(() => {
     function keydown(event: KeyboardEvent): void {
       if (Settings.DisableHotkeys) return;
@@ -145,10 +137,10 @@ function Root(props: IProps): React.ReactElement {
     finishUpdatingRAM();
   }, 300);
 
-  function parseCode(newCode: string) {
+  const parseCode = (newCode: string) => {
     startUpdatingRAM();
     debouncedCodeParsing(newCode);
-  }
+  };
 
   // How to load function definition in monaco
   // https://github.com/Microsoft/monaco-editor/issues/1415
@@ -444,6 +436,16 @@ function Root(props: IProps): React.ReactElement {
     onOpenPreviousTab,
   });
 
+  useEffect(() => {
+    if (currentScript !== null) {
+      const tabIndex = currentTabIndex();
+      if (typeof tabIndex === "number") onTabClick(tabIndex);
+      parseCode(currentScript.code);
+    }
+    // disable eslint because we want to run this only once on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
       <div

src/ScriptEditor/ui/useVimEditor.tsx

@@ -23,6 +23,9 @@ export function useVimEditor({ editor, vim, onOpenNextTab, onOpenPreviousTab, on
 
   const vimStatusRef = useRef<HTMLElement>(null);
 
+  const actionsRef = useRef({ save: onSave, openNextTab: onOpenNextTab, openPreviousTab: onOpenPreviousTab });
+  actionsRef.current = { save: onSave, openNextTab: onOpenNextTab, openPreviousTab: onOpenPreviousTab };
+
   useEffect(() => {
     // setup monaco-vim
     if (vim && editor && !vimEditor) {
@@ -31,14 +34,14 @@ export function useVimEditor({ editor, vim, onOpenNextTab, onOpenPreviousTab, on
         setVimEditor(MonacoVim.initVimMode(editor, vimStatusRef.current));
         MonacoVim.VimMode.Vim.defineEx("write", "w", function () {
           // your own implementation on what you want to do when :w is pressed
-          onSave();
+          actionsRef.current.save();
         });
         MonacoVim.VimMode.Vim.defineEx("quit", "q", function () {
           Router.toPage(Page.Terminal);
         });
 
         const saveNQuit = (): void => {
-          onSave();
+          actionsRef.current.save();
           Router.toPage(Page.Terminal);
         };
         // "wqriteandquit" &  "xriteandquit" are not typos, prefix must be found in full string
@@ -48,10 +51,10 @@ export function useVimEditor({ editor, vim, onOpenNextTab, onOpenPreviousTab, on
         // Setup "go to next tab" and "go to previous tab". This is a little more involved
         // since these aren't Ex commands (they run in normal mode, not after typing `:`)
         MonacoVim.VimMode.Vim.defineAction("nextTabs", function (_cm: any, { repeat = 1 }: { repeat?: number }) {
-          onOpenNextTab(repeat);
+          actionsRef.current.openNextTab(repeat);
         });
         MonacoVim.VimMode.Vim.defineAction("prevTabs", function (_cm: any, { repeat = 1 }: { repeat?: number }) {
-          onOpenPreviousTab(repeat);
+          actionsRef.current.openPreviousTab(repeat);
         });
         MonacoVim.VimMode.Vim.mapCommand("gt", "action", "nextTabs", {}, { context: "normal" });
         MonacoVim.VimMode.Vim.mapCommand("gT", "action", "prevTabs", {}, { context: "normal" });