perf(web): Shift re-renders only each row's quick-action group#22726

merged1
refactor/split-pull-requests-thin-route
refactor/split-pull-requests-speed-mode
opened3d agobyJJulius Marminge
View on GitHubTwo-way sync enabledPR last imported 3d ago

Tapping Shift on the pull requests list cost about 15k renders. speedMode was a row prop, so every Shift press re-rendered every row along with its tooltips, buttons and icons, only to toggle display on the quick-action group.

Shift now reaches the rows through PullRequestSpeedModeContext. PullRequestListGroups provides it (PullRequestSpeedModeProvider holds the only key subscription), and a small SpeedModeGroup wrapper inside PullRequestSpeedActions is the only consumer. Rows are memo, so they bail out; the buttons are the wrapper's children, so they bail out too. Only the wrapper re-renders, one per row with quick actions. The thread panel's pull request list provides the same context from the Shift state it already tracks, so it behaves as before.

I first tried a useShortcutModifierState call in each wrapper. It cut renders the same way but raised commits from ~20 to ~820. Each row's window listener runs in its own task, so React committed once per row. The single provider keeps it to one commit per key change.

Shift tapped 3 times, 136 rows listed (rc-init render counter, dev server seeded from real data, fresh browser per side, base 6a6c84f990 vs this layer):

run 1run 2run 3median
main renders18,24615,00515,14015,140
after renders4,4291,0921,0451,092 (-93%)
main commits22232222
after commits18181318

Run 1 on both sides includes rows refreshing as the list data settles after load. After the change, the Shift renders are 816 SpeedModeGroup (136 rows × 6 key transitions) plus the sidebar, which listens to modifiers on its own.

Tests run: tsc --noEmit for apps/web, vp lint on the changed files, vp test run src/reactCompilerCoverage.test.ts -t pullRequest (0 bailouts).

Part of the pull request page split stack: #22671 → #22672 → #22702 → #22703 → #22704 → #22705 → #22706 → #22726 → #22727.

🤖 Generated with Claude Code

Checks

All checks passed

Added 1 commit

  • perf(web): Shift re-renders only each row's quick-action group0290927
Synced from GitHub

Approvability

Verdict: Approved at 0290927

Macroscope's review found this PR approvable — This is a focused performance refactor that moves the existing Shift-state update to a context consumer around each quick-action group. The displayed actions and interaction behavior remain unchanged while rerenders are substantially reduced.

You can add or adjust custom eligibility rules. Learn more.

Synced from GitHub

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Path: .coderabbit.config.ts
  • Review profile: CHILL
  • Plan: Team
  • Run ID: a6d68d2f-91da-49cc-b615-33028a62e853
📥 Commits

Reviewing files that changed from the base of the PR and between bcb74b5d337e4a5c366e2599d9fca88a72b0a13d and 0290927ccadf16aca93b4ba8349222209c6e6302.

📒 Files selected for processing: 4
  • apps/web/src/components/pullRequest/PullRequestListGroups.tsx
  • apps/web/src/components/pullRequest/PullRequestRow.tsx
  • apps/web/src/components/pullRequest/PullRequestSpeedActions.tsx
  • apps/web/src/components/pullRequest/ThreadPullRequestsPanel.tsx
💤 Files with no reviewable changes: 1
  • apps/web/src/components/pullRequest/PullRequestRow.tsx

Limit details: You’ve used all 10 included reviews currently available.

📝 Walkthrough

Speed-action visibility now uses shared context instead of a visible prop. Pull-request lists provide speed mode through a provider, and speed actions display while speed mode or a busy state is active.

Changes: Pull-request speed mode

Layer / File(s)Summary
Context-based action visibility
apps/web/src/components/pullRequest/PullRequestSpeedActions.tsx
PullRequestSpeedActions reads speed mode from context. Its provider activates speed mode when Shift is held without Meta, Ctrl, or Alt. Actions remain visible while busy.
Context wiring in pull-request views
apps/web/src/components/pullRequest/PullRequestListGroups.tsx, apps/web/src/components/pullRequest/PullRequestRow.tsx, apps/web/src/components/pullRequest/ThreadPullRequestsPanel.tsx
PullRequestListGroups provides shortcut-derived speed mode, and ThreadPullRequestsPanel provides its current speedMode value. PullRequestRow no longer accepts or forwards a speedMode prop.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Refactor

Suggested reviewers: maria-rcks

Merge Risk: ⚪ Minimal · up to 02909

Quick actions retain their Shift-controlled visibility in the inspected pull-request views; no actionable merge risk remains after normal checks.

Pre-merge checks: Passed 4
Check nameStatusExplanation
Title checkPassedThe title clearly identifies the performance change: Shift updates re-render only each row's quick-action group.
Description checkPassedThe description clearly explains the problem, implementation, performance results, and verification steps. It omits an explicit Scope and approval section and UI screenshots, but it is otherwise detai…
Linked Issues checkPassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes checkPassedCheck skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

The description clearly explains the problem, implementation, performance results, and verification steps. It omits an explicit Scope and approval section and UI screenshots, but it is otherwise detailed and relevant rather than largely incomplete.

✨ Finishing Touches
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Usage-based review receipt

Note

This review was completed with usage-based billing: files reviewed beyond your plan's included limits are billed at $0.25/file. View usage-based billing.

Comment @coderabbitai help to get the list of available commands.