Speed up text editor for large inputs

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Split the big app file into smaller TypeScript modules and add `tsc` typechecking
 - Add PDF upload support (extract all text client-side for speed reading)
 - Improve text editor performance by applying changes explicitly instead of reprocessing on each keystroke
+- Make the text editor use an uncontrolled textarea for better performance on large inputs
 
 ### 2026-02-02: 1.0.5
 

src/App.tsx

@@ -42,7 +42,6 @@ export default function App() {
   const positionsRef = useRef<PositionsMap>(savedSettings?.positions || {});
 
   const [text, setText] = useState(() => savedSettings?.text || DEFAULT_TEXT);
-  const [draftText, setDraftText] = useState(() => savedSettings?.text || DEFAULT_TEXT);
   const [words, setWords] = useState(() =>
     splitWords(savedSettings?.text || DEFAULT_TEXT),
   );
@@ -100,24 +99,15 @@ export default function App() {
   const timeoutRef = useRef<number | null>(null);
   const prevTextRef = useRef(text);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [textEditorSession, setTextEditorSession] = useState(0);
 
   const toggleTextInput = useCallback(() => {
     setShowTextInput((prev) => {
       const next = !prev;
-      if (next) setDraftText(text);
+      if (next) setTextEditorSession((s) => s + 1);
       return next;
     });
-  }, [text]);
-
-  const applyDraftText = useCallback(() => {
-    setText(draftText);
-    setShowTextInput(false);
-  }, [draftText]);
-
-  const cancelDraftText = useCallback(() => {
-    setDraftText(text);
-    setShowTextInput(false);
-  }, [text]);
+  }, []);
 
   const togglePlay = useCallback(() => {
     if (currentIndex >= words.length - 1) {
@@ -300,7 +290,6 @@ export default function App() {
         case "Escape":
           setShowInfo(false);
           setShowShortcuts(false);
-          setDraftText(text);
           setShowTextInput(false);
           setShowSettings(false);
           break;
@@ -426,17 +415,13 @@ export default function App() {
 
       {showTextInput && (
         <TextInputOverlay
-          text={draftText}
-          onChangeText={(e) => setDraftText(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-              e.preventDefault();
-              applyDraftText();
-            }
+          key={textEditorSession}
+          initialText={text}
+          onApply={(nextText) => {
+            setText(nextText);
+            setShowTextInput(false);
           }}
-          isDirty={draftText !== text}
-          onApply={applyDraftText}
-          onCancel={cancelDraftText}
+          onCancel={() => setShowTextInput(false)}
         />
       )}
 

src/components/TextInputOverlay.tsx

@@ -1,30 +1,45 @@
-import type { ChangeEventHandler, KeyboardEventHandler } from "react";
+import { useCallback, useRef, useState } from "react";
+import type { FormEventHandler, KeyboardEventHandler } from "react";
 import { styles } from "../styles";
 
 type Props = {
-  text: string;
-  onChangeText: ChangeEventHandler<HTMLTextAreaElement>;
-  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
-  isDirty: boolean;
-  onApply: () => void;
+  initialText: string;
+  onApply: (nextText: string) => void;
   onCancel: () => void;
 };
 
-export function TextInputOverlay({
-  text,
-  onChangeText,
-  onKeyDown,
-  isDirty,
-  onApply,
-  onCancel,
-}: Props) {
+export function TextInputOverlay({ initialText, onApply, onCancel }: Props) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const [isDirty, setIsDirty] = useState(false);
+
+  const handleInput = useCallback<FormEventHandler<HTMLTextAreaElement>>(() => {
+    // Only flip once. Avoids re-rendering on every keystroke for huge texts.
+    setIsDirty((prev) => prev || true);
+  }, []);
+
+  const apply = useCallback(() => {
+    const nextText = textareaRef.current?.value ?? initialText;
+    onApply(nextText);
+  }, [initialText, onApply]);
+
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
+    (e) => {
+      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        apply();
+      }
+    },
+    [apply],
+  );
+
   return (
     <div style={styles.textInputOverlay}>
       <div style={styles.textInputPanel}>
         <textarea
-          value={text}
-          onChange={onChangeText}
-          onKeyDown={onKeyDown}
+          defaultValue={initialText}
+          ref={textareaRef}
+          onInput={handleInput}
+          onKeyDown={handleKeyDown}
           style={styles.textarea}
           placeholder="Paste your text here..."
           rows={8}
@@ -45,7 +60,7 @@ export function TextInputOverlay({
               Cancel
             </button>
             <button
-              onClick={onApply}
+              onClick={apply}
               style={{
                 ...styles.textInputBtnPrimary,
                 ...(isDirty ? {} : styles.textInputBtnPrimaryDisabled),

src/components/modals/InfoModal.tsx

@@ -95,23 +95,8 @@ export function InfoModal({ onClose }: Props) {
             <li>Focus on the red letter, let words come to you</li>
             <li>Take breaks to avoid eye fatigue</li>
           </ul>
-
-          <h3 style={styles.sectionTitle}>Source code</h3>
-          <p style={styles.paragraph}>
-            This project is open source and available on{" "}
-            <a
-              href="https://github.com/ronilaukkarinen/speed-reader"
-              target="_blank"
-              rel="noopener noreferrer"
-              style={styles.link}
-            >
-              GitHub
-            </a>
-            .
-          </p>
         </div>
       </div>
     </div>
   );
 }
-