diff --git a/.jules/bolt.md b/.jules/bolt.md new file mode 100644 index 0000000..14deda2 --- /dev/null +++ b/.jules/bolt.md @@ -0,0 +1,3 @@ +## 2024-05-24 - [Defer Expensive Synchronous Work During Fake Streaming] +**Learning:** Fake text streaming with `setInterval` at rapid intervals (e.g. 24ms) can severely block the main thread if expensive synchronous computations (like text analysis/scoring) depend directly on the streaming state. +**Action:** Always wrap rapidly changing state in `useDeferredValue` before feeding it into expensive `useMemo` hooks to keep the UI thread unblocked. diff --git a/apps/quill/client/components/playground-view.tsx b/apps/quill/client/components/playground-view.tsx index 511226b..cd8a787 100644 --- a/apps/quill/client/components/playground-view.tsx +++ b/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,12 @@ export function PlaygroundView({ }; }, [output]); - const snapshot = useMemo(() => analyzeText(visibleOutput), [visibleOutput]); + const deferredVisibleOutput = useDeferredValue(visibleOutput); + + const snapshot = useMemo( + () => analyzeText(deferredVisibleOutput), + [deferredVisibleOutput] + ); const { score, details } = useMemo( () => guide