⚡ Bolt: [performance improvement] Defer expensive text analysis during streaming

.jules/bolt.md

@@ -0,0 +1,3 @@
+## 2024-05-19 - useDeferredValue for rapidly updating UI
+**Learning:** During text streaming with very short intervals (e.g. 24ms), synchronous operations on the changing state (like expensive calculations or text analysis) will block the main thread and cause the UI to become unresponsive.
+**Action:** Use React's `useDeferredValue` for the rapidly changing state and perform the expensive synchronous computations on the deferred value to ensure the main thread isn't blocked.

apps/quill/client/components/playground-view.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import { USE_CASE_PRESETS } from "../../src/lib/presets";
 import { analyzeText, scoreDeterministic } from "../../src/lib/rubric";
 import type { Guide, UseCase } from "../../src/lib/types";
@@ -255,7 +255,14 @@ export function PlaygroundView({
     };
   }, [output]);
 
-  const snapshot = useMemo(() => analyzeText(visibleOutput), [visibleOutput]);
+  // Defer the rapidly changing visibleOutput so the expensive text analysis
+  // doesn't block the main thread during the 24ms interval streaming.
+  const deferredVisibleOutput = useDeferredValue(visibleOutput);
+
+  const snapshot = useMemo(
+    () => analyzeText(deferredVisibleOutput),
+    [deferredVisibleOutput]
+  );
   const { score, details } = useMemo(
     () =>
       guide