← ClaudeAtlas

conductor-rewrite-performancelisted

Use when building or optimizing a local-first desktop app with React, dealing with excessive re-renders during navigation, slow chat/list UIs with streaming content, or profiling a Tauri app without native Chrome DevTools access.
AkaraChen/2code · ★ 22 · AI & Automation · score 64
Install: claude install-skill AkaraChen/2code
## When to use this skill - You're building a local-first desktop application with React and experiencing performance bottlenecks - Navigation or route changes trigger cascading re-renders across multiple mounted components - You have a chat interface or long list that streams content and re-renders become sluggish - You're using Tauri and need to profile React performance but can't access Chrome DevTools - Multiple heavy views are mounted simultaneously (sidebar, nav, chat, terminal, editor) and all re-render on state changes - You need to manage multiple heavyweight child processes without exhausting system memory ## Core principles 1. **Local-first eliminates an entire category of performance problems.** When SQLite is your source of truth and the UI never waits on the network, the bottleneck moves up into the rendering layer—every unnecessary re-render becomes the slowest thing users feel. 2. **Unstable references cascade re-renders through the entire component tree.** When router hooks return fresh objects on every render, every component reading them re-renders even when values haven't changed, and those re-renders propagate to all children. 3. **Virtualization plus memoization is the only way to make streaming lists fast.** Render only what's on screen (15 messages instead of 500), and ensure only the actively changing item re-renders while the rest stay memoized. 4. **The fastest operation is the one the user never waits on.** Move expensive synchronous work (li