perf(arrows): use reactive hooks for arrow handle display and editing state#8167
Merged
steveruizok merged 4 commits intomainfrom Mar 5, 2026
Merged
perf(arrows): use reactive hooks for arrow handle display and editing state#8167steveruizok merged 4 commits intomainfrom
steveruizok merged 4 commits intomainfrom
Conversation
… state Wrap shouldDisplayHandles and isEditing checks in useValue hooks for finer-grained reactivity, avoiding unnecessary re-renders of arrow components. Refactor getArrowLabelPosition to accept isEditing as a parameter rather than computing it internally.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
5 Skipped Deployments
|
Replace editor.getOnlySelectedShape()?.id === shape.id with editor.getOnlySelectedShapeId() === shape.id in ArrowShapeUtil. This avoids fetching the full shape object and optional chaining, simplifying the null-check and improving readability/efficiency when verifying the selected shape.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
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.
Previously, any change to any shape would cause all arrows to render. We should be careful with any reactive call to getOnlySelectedShape, because it will call when the selected shape is changing. If we need to react to a change in which shape is selected, we should use getOnlySelectedShapeId.
In order to reduce unnecessary re-renders of arrow components, this PR changes a call to
getOnlySelectedShape()?.idtogetOnlySelectedShapeId.To avoid an extra render when editing shape changes, it also wraps
shouldDisplayHandlesandisEditingchecks inuseValuehooks for finer-grained reactivity. It also refactorsgetArrowLabelPositionto acceptisEditingas a parameter rather than computing it internally, avoiding redundant reactive lookups.Change type
improvementTest plan
Release notes
Note
Medium Risk
Touches arrow rendering reactivity (selection/editing state and label positioning), so regressions could show up as missing handles or mispositioned labels, but the changes are localized to UI/perf code.
Overview
Reduces unnecessary arrow re-renders by switching arrow component state derivations to fine-grained
useValuesubscriptions (e.g.shouldDisplayHandles, selection, and editing state) and by preferringgetOnlySelectedShapeId()overgetOnlySelectedShape()where only the id is needed.Refactors
getArrowLabelPositionto accept an explicitisEditingflag and updates all call sites (geometry, component render, and SVG export) to avoid redundant reactive lookups when computing label bounds. Also updates touch-end handling inuseCanvasEventsto useeditor.getEditingShapeId().Written by Cursor Bugbot for commit e04558e. This will update automatically on new commits. Configure here.