⚡ Bolt: Prevent main thread blocking during text streaming#44
⚡ Bolt: Prevent main thread blocking during text streaming#44aloewright wants to merge 1 commit into
Conversation
Implements `useDeferredValue` for rapidly updating text streaming to prevent UI thread blocking while running synchronous text analysis. Co-authored-by: aloewright <3641844+aloewright@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Warning Review limit reached
More reviews will be available in 59 minutes and 31 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
postpilot | b4f3ff6 | May 26 2026, 05:27 AM |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces performance optimizations in the playground view component by utilizing React's useDeferredValue hook. This decouples the rapidly updating streaming text output from the expensive text analysis computations, preventing UI thread blocking and stuttering. A corresponding learning document has also been added to record this pattern. There are no review comments to address.
There was a problem hiding this comment.
Pull request overview
Improves the Quill playground’s streaming UX by deferring the rapidly-updating output string before running expensive synchronous rubric analysis, reducing UI jank during character-by-character output streaming.
Changes:
- Wrap
visibleOutputwith ReactuseDeferredValueand baseanalyzeTextmemoization on the deferred value. - Add a Jules “bolt” note documenting the pattern for streaming text + expensive synchronous computations.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| apps/quill/client/components/playground-view.tsx | Uses useDeferredValue to decouple streaming output updates from expensive rubric analysis recalculation. |
| .jules/bolt.md | Adds a short note capturing the deferred-value approach for streaming text workloads. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Defer the rapidly updating text stream so that expensive analysis doesn't | ||
| // block the main thread. |
|
|
||
| ## 2024-05-24 - Deferring State for Streaming Text Calculations | ||
| **Learning:** When dealing with rapidly updating text streams (e.g., streaming LLM output character-by-character at intervals of ~24ms), running expensive synchronous computations (like text analysis/scoring) on the active stream value blocks the main UI thread and causes lag/stuttering. | ||
| **Action:** Always use React's `useDeferredValue` to decouple the rapidly updating UI state from the state passed into expensive `useMemo` or synchronous operations. This allows React to prioritize rendering the stream while running the heavy calculations in the background. |
What:
Implemented React's
useDeferredValueinapps/quill/client/components/playground-view.tsxto wrap thevisibleOutputstate. Updated the downstreamuseMemodependency array for thesnapshotcalculation to rely on the deferred value instead of the rapidly streaming raw output.Why:
When the LLM output streams in character-by-character (at an interval of approximately ~24ms), running the expensive synchronous
analyzeTextandscoreDeterministiccomputations on the active stream value blocks the main UI thread. This leads to dropped frames and lag/stuttering in the frontend text rendering.Impact:
By decoupling the rapidly updating UI state from the state passed into the expensive synchronous
useMemooperations, React can now prioritize smoothly rendering the active text stream while executing the heavy calculations safely in the background on slightly older state. This ensures that typing feels continuous.Measurement:
Verify the improvement by loading up the local playground UI, initiating a stream, and observing the rendering performance through React DevTools Profiler or browser performance profiling tools—the main thread should no longer block during generation.
PR created automatically by Jules for task 3514953781856230736 started by @aloewright