conductor-rewrite-performance

Diagnose and fix React re-render bottlenecks in local-first Tauri desktop apps.

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill conductor-rewrite-performance-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: conductor-rewrite-performance
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/conductor-rewrite-performance
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill conductor-rewrite-performance-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Local-first desktop apps built with React and Tauri often suffer from cascading re-renders during navigation, sluggish streaming chat lists, and profiling blind spots because the Tauri webview lacks Chrome DevTools access. ## Core Features & Use Cases - Tauri Bridge Shimming: Shim the Tauri invoke() bridge so the same client runs in Chrome with full React DevTools Profiler access. - Stable Router References: Replace react-router with TanStack Router to get structural sharing and stop navigation-triggered re-render cascades. - Virtualized Streaming Lists: Combine react-virtuoso virtualization with React.memo so only the actively streaming message re-renders. - Use Case: A chat UI with 500 messages re-renders on every streamed token; apply virtualization plus memoization so only the visible, changing message updates. ## Quick Start Ask the AI to profile my Tauri React app's slow navigation and fix the re-render cascades using the conductor-rewrite-performance tactics.

Frequently Asked Questions about conductor-rewrite-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix excessive React re-renders when navigating routes?

Replace react-router's useSearchParams with TanStack Router's Route.useSearch, which uses structural sharing to return stable references. Components then re-render only when param values actually change instead of on every navigation event.

How to profile a Tauri React app without Chrome DevTools?

Shim the Tauri invoke() bridge by checking for __TAURI_INTERNALS__ and proxying calls to a dev server when absent. This lets the same client boot in Chrome where the React DevTools Profiler works fully.

react-router vs TanStack Router for rendering performance?

react-router returns fresh URLSearchParams objects every render, cascading re-renders through consumers. TanStack Router provides structural sharing with stable references, eliminating the need for manual useMemo wrappers around parsed params.

How do I make a streaming chat list render faster in React?

Wrap each message in React.memo and render the list with react-virtuoso's VirtuosoMessageList instead of mapping all items. Only visible messages mount in the DOM and only the actively streaming message re-renders.

Why is my local-first app still slow despite no network latency?

Once SQLite removes network waits, rendering becomes the bottleneck. Unstable hook references, unvirtualized long lists, and synchronous work like git checkpoints on the critical path become the slowest operations users feel.

When should I not virtualize a React list?

Virtualization adds complexity unnecessary for short, static lists under roughly a hundred items. It pays off when rendering hundreds of messages or rows where only a fraction is visible at once.