Avoid extra expanded image dialog rerenders#2741
Draft
cursor[bot] wants to merge 3 commits into
Draft
Conversation
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What Changed
useEffectfromExpandedImageDialogso new preview props render directly instead of committing once with stale local state and again after the effect.useEffectEventso the subscription stays stable while reading the latest close/navigation behavior.Why
React Doctor flagged
ExpandedImageDialogfor 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:
src/components/chat/ExpandedImageDialog.tsxhadno-derived-state-effect.ExpandedImageDialogdiagnostics; package scan went from 753 warnings / 255 files to 752 warnings / 254 files.UI Changes
React Scan recordings are included in this PR:
docs/react-scan-recordings/expanded-image-before.webmdocs/react-scan-recordings/expanded-image-after.webmBoth recordings use the same React Scan-enabled harness. Over the same 7s preview-rotation interval, the
ExpandedImageDialogsubtree committed 13 times before and 7 times after.Checklist
Verification:
bun fmtbun lintbun typecheckNote
Reduce rerenders in
ExpandedImageDialogby extracting navigation and keyboard shortcut hooksuseExpandedImagePreviewNavigationhook that tracks a(sourcePreview, index)tuple, realigning to the incoming prop's index only when the source preview reference changes.useExpandedImageKeyboardShortcutshook that attaches a singlekeydownlistener for the dialog's lifetime, usinguseEffectEventso callbacks always capture the latest state without re-registering.ExpandedImageDialog, eliminating the rerender cycle they caused.Macroscope summarized 43501dc.