Skip to content

Avoid extra expanded image dialog rerenders#2741

Draft
cursor[bot] wants to merge 3 commits into
mainfrom
cursor/react-component-health-4648
Draft

Avoid extra expanded image dialog rerenders#2741
cursor[bot] wants to merge 3 commits into
mainfrom
cursor/react-component-health-4648

Conversation

@cursor
Copy link
Copy Markdown
Contributor

@cursor cursor Bot commented May 17, 2026

What Changed

  • Removed the derived-state useEffect from ExpandedImageDialog so new preview props render directly instead of committing once with stale local state and again after the effect.
  • Kept local left/right image navigation state scoped to the currently displayed preview.
  • Moved the global keyboard listener into a named hook and used useEffectEvent so the subscription stays stable while reading the latest close/navigation behavior.

Why

React Doctor flagged ExpandedImageDialog for derived state in an effect. That pattern caused an avoidable extra render/commit whenever the parent selected a different image preview. The new render-time derivation preserves local navigation while removing the sync effect and its extra commit.

React Doctor follow-up:

  • Before: src/components/chat/ExpandedImageDialog.tsx had no-derived-state-effect.
  • After: no ExpandedImageDialog diagnostics; package scan went from 753 warnings / 255 files to 752 warnings / 254 files.

UI Changes

React Scan recordings are included in this PR:

  • Before: docs/react-scan-recordings/expanded-image-before.webm
  • After: docs/react-scan-recordings/expanded-image-after.webm

Both recordings use the same React Scan-enabled harness. Over the same 7s preview-rotation interval, the ExpandedImageDialog subtree committed 13 times before and 7 times after.

Checklist

  • This PR is small and focused
  • I explained what changed and why
  • I included before/after screenshots for any UI changes
  • I included a video for animation/interaction changes

Verification:

  • bun fmt
  • bun lint
  • bun typecheck
Open in Web View Automation 

Note

Reduce rerenders in ExpandedImageDialog by extracting navigation and keyboard shortcut hooks

  • Extracts image navigation state into a new useExpandedImagePreviewNavigation hook that tracks a (sourcePreview, index) tuple, realigning to the incoming prop's index only when the source preview reference changes.
  • Extracts keyboard handling into a new useExpandedImageKeyboardShortcuts hook that attaches a single keydown listener for the dialog's lifetime, using useEffectEvent so callbacks always capture the latest state without re-registering.
  • Removes local preview state and its synchronization effect from ExpandedImageDialog, eliminating the rerender cycle they caused.

Macroscope summarized 43501dc.

cursoragent and others added 3 commits May 17, 2026 16:06
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
@github-actions github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:M 30-99 changed lines (additions + deletions). labels May 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:M 30-99 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant