Skip to content

feat: optimize re-renders for builder-component #4172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: optimize re-renders for builder-component #4172

wants to merge 3 commits into from

Conversation

@midhunadarvin
Copy link
Contributor

@midhunadarvin midhunadarvin commented Oct 30, 2025 •
edited by cursor bot
Loading

Description

  • prevent updateState calls whenever we call delete key on the rootState

Loom
https://www.loom.com/share/4d19d3dacd14468aaa8f7e4a575fbe01

Note

Introduce onChange.suspend/resume and use them to batch rootState resets in BuilderComponent, reducing unnecessary re-renders.

  • State change tracking (packages/react/lib/on-change.js):
    • Add SUSPEND/RESUME symbols and isSuspended flag.
    • Expose onChange.suspend(proxy) and onChange.resume(proxy) APIs.
    • ignoreChange now skips notifications while suspended; handler exposes suspend/resume at root.
  • Builder component (packages/react/src/components/builder-component.component.tsx):
    • Wrap builder.resetState and builder.resetSymbolState handlers with onChange.suspend(this.rootState)/onChange.resume(this.rootState) to batch deletions/assignments.
    • After reset, call debouncedUpdateState (1s debounce) to coalesce updates.
    • Add debouncedUpdateState = debounce(this.updateState, 1000).

Written by Cursor Bugbot for commit 316c80d. This will update automatically on new commits. Configure here.

@midhunadarvin midhunadarvin self-assigned this Oct 30, 2025
@changeset-bot
Copy link

changeset-bot bot commented Oct 30, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: 316c80d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

cursor[bot]

This comment was marked as outdated.

Sign in to view

@nx-cloud
Copy link

nx-cloud bot commented Oct 30, 2025 •
edited
Loading

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

To disable these notifications, a workspace admin can disable them in workspace settings.

View your CI Pipeline Execution ↗ for commit 316c80d

Command Status Duration Result
nx test @snippet/angular-17 ❌ Failed 11m 32s View ↗
nx test @snippet/angular-17-ssr ❌ Failed 6m 12s View ↗
nx test @snippet/vue ❌ Failed 3m 56s View ↗
nx test @snippet/react ❌ Failed 3m 44s View ↗
nx test @snippet/svelte ❌ Failed 3m 53s View ↗
nx test @e2e/qwik-city ✅ Succeeded 10m 41s View ↗
nx test @e2e/nextjs-sdk-next-app ✅ Succeeded 10m 15s View ↗
nx test @e2e/nuxt ✅ Succeeded 10m 10s View ↗
Additional runs (37) ✅ Succeeded ... View ↗

☁️ Nx Cloud last updated this comment at 2025-10-31 07:01:34 UTC

cursor[bot]
cursor bot reviewed Oct 31, 2025
View reviewed changes
packages/react/src/components/builder-component.component.tsx
// Resume change tracking - ensure this always runs even if deletion fails
onChange.resume(this.rootState);
}

Copy link

@cursor cursor bot Oct 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Bug

The builder.resetSymbolState case performs state updates (Object.assign, setState) after change tracking resumes, defeating batching and risking inconsistent state if an error occurs during deletion. Separately, the builder.resetState case causes redundant re-renders by calling setState directly and then again via debouncedUpdateState.

Fix in Cursor Fix in Web

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cursor cursor[bot] cursor[bot] left review comments

@sanyamkamat sanyamkamat Awaiting requested review from sanyamkamat

At least 1 approving review is required to merge this pull request.

Assignees

@midhunadarvin midhunadarvin

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@midhunadarvin