feat: debounce code editing (fixes #3)

Author: yeonjuan

src/components/Editor.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import CodeMirror from "codemirror";
+import { debounce } from "@/shared/debounce";
+import { EDITING_TIMEOUT } from "@/components/constants";
 import type { FC } from "react";
 import type { Linter } from "eslint";
 import type { TextMarker, Editor as CodeEditor } from "codemirror";
@@ -27,14 +29,16 @@ export const Editor: FC<Props> = (props) => {
   const [errorMarkers, setErrorMarkers] = useState<TextMarker[]>([]);
   const ref = useRef<HTMLTextAreaElement>(null);
 
+  const changeHandler = debounce(() => {
+    const value = editor?.getValue() ?? "";
+    props.onChange?.(value);
+    setText(value);
+  }, EDITING_TIMEOUT);
+
   useEffect(() => {
     if (ref.current) {
       editor = CodeMirror.fromTextArea(ref.current, CODE_MIRROR_OPTIONS);
-      editor.on("change", () => {
-        const value = editor?.getValue() ?? "";
-        props.onChange?.(value);
-        setText(value);
-      });
+      editor.on("change", changeHandler);
     }
   }, []);
 

src/components/RuleConfig.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import CodeMirror from "codemirror";
+import { EDITING_TIMEOUT } from "@/components/constants";
+import { debounce } from "@/shared/debounce";
 import type { FC } from "react";
 import type { Linter } from "eslint";
 import "codemirror/lib/codemirror.css";
@@ -33,11 +35,14 @@ export const RuleConfig: FC<Props> = (props) => {
         ref.current,
         CODE_MIRROR_OPTIONS
       );
-      codeMirror.on("change", () => {
-        const value = codeMirror.getValue();
-        props.onChange?.(value);
-        setText(value);
-      });
+      codeMirror.on(
+        "change",
+        debounce(() => {
+          const value = codeMirror.getValue();
+          props.onChange?.(value);
+          setText(value);
+        }, EDITING_TIMEOUT)
+      );
     }
   }, []);
 

src/components/constants.ts

@@ -1,5 +1,7 @@
 import type { Linter } from "eslint";
 
+export const EDITING_TIMEOUT = 300;
+
 export const DEFAULT_CODE = `
 async function invalidInTryCatch1() {
   try {

src/shared/debounce.ts

@@ -0,0 +1,14 @@
+type Func<T = unknown> = (...args: T[]) => void;
+
+export function debounce(func: Func, delayMs: number): Func {
+  let timer: null | ReturnType<typeof setTimeout> = null;
+  return function call(...args: Parameters<Func>) {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      timer = null;
+      func(...args);
+    }, delayMs);
+  };
+}