perf(frontend): uiStore writes re-render whole-store subscribers and hit localStorage per pointermove #725

New issue

Open

opened 2026-09-25 08:50:08 +02:00 by dries · 0 comments

dries commented

2026-09-25 08:50:08 +02:00

Owner

Follow-up from the perf report (second tier).

Symptom: `components/Resizer.tsx:58-64` calls `setWidth` per `pointermove` → `uiStore.ts:255` `set()` → the `persist` middleware serialises the `partialize` object (`uiStore.ts:444-468`) to localStorage per move. `App.tsx:133-137` (`GlobalHotkeys`) and `components/CommandPalette.tsx:164-171` subscribe with a bare `useUiStore()` (no selector), so both re-render per pixel, dragging `CommandPalette` (896 lines) along. Same pattern in `RightPanel.tsx:685-696`. `components/TerminalPane.tsx:160-167` then runs `fit.fit()` + a WS resize per observed frame during the drag (SIGWINCH storm on the PTY).

Fix: per-field selectors for the two bare `useUiStore()` calls; keep a local width during drag in `Resizer` and commit on pointerup; rAF/50 ms trailing debounce in the terminal ResizeObserver.

Follow-up from the perf report (second tier). **Symptom:** \`components/Resizer.tsx:58-64\` calls \`setWidth\` per \`pointermove\` → \`uiStore.ts:255\` \`set()\` → the \`persist\` middleware serialises the \`partialize\` object (\`uiStore.ts:444-468\`) to localStorage per move. \`App.tsx:133-137\` (\`GlobalHotkeys\`) and \`components/CommandPalette.tsx:164-171\` subscribe with a bare \`useUiStore()\` (no selector), so both re-render per pixel, dragging \`CommandPalette\` (896 lines) along. Same pattern in \`RightPanel.tsx:685-696\`. \`components/TerminalPane.tsx:160-167\` then runs \`fit.fit()\` + a WS resize per observed frame during the drag (SIGWINCH storm on the PTY). **Fix:** per-field selectors for the two bare \`useUiStore()\` calls; keep a local width during drag in \`Resizer\` and commit on pointerup; rAF/50 ms trailing debounce in the terminal ResizeObserver.