perf(Blocks,Block): add deep comparison to block/blocks memo call#4253
perf(Blocks,Block): add deep comparison to block/blocks memo call#4253jakequade-pc wants to merge 3 commits intoBuilderIO:mainfrom
Conversation
🦋 Changeset detectedLatest commit: 0a6d048 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
cc @samijaber @sidmohanty11 just for visibility 😊 thanks for your time! |
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx test @e2e/angular-17 |
❌ Failed | 5m 24s | View ↗ |
nx test @e2e/angular-19-ssr |
❌ Failed | 4m 7s | View ↗ |
nx test @e2e/svelte |
❌ Failed | 4m 17s | View ↗ |
nx test @e2e/sveltekit |
❌ Failed | 4m 9s | View ↗ |
nx test @e2e/angular-17-ssr |
❌ Failed | 4m 2s | View ↗ |
nx test @builder.io/sdks |
❌ Failed | 5s | View ↗ |
nx typecheck @builder.io/sdks |
✅ Succeeded | 6s | View ↗ |
☁️ Nx Cloud last updated this comment at 2026-02-09 10:11:09 UTC
|
thanks @jakequade-pc for the PR, looks good to me - tagging @midhunadarvin to take a look once on why the tests aren't running and help out |
|
@jakequade-pc Could you rebase your branch with the |
jakequade-pc
force-pushed
the
perf-react-native-deep-memo-comparison
branch
from
ad3738b to
77421c5
Compare
|
@midhunadarvin done! Thanks for your patience with this |
|
@jakequade-pc There are a couple of E2E test workflows failing : Could you take a look at the failing test cases and try to resolve them ? Let me know if you need any additional help. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
|
I've run the failing test suites locally and can confirm they pass. Again, I really appreciate the time, regardless of the outcome we land on! |
React.memo uses a shallow comparison, which isn't enough in this case. Using [welldone-software/why-did-you-render](https://github.com/welldone-software/why-did-you-render) I found our homepage content would update 12 times in one load with the wdyr message "different objects that are equal by value". This change adds a deep comparison, which when tested via patch-package, eliminated those re-renders.
jakequade-pc
force-pushed
the
perf-react-native-deep-memo-comparison
branch
from
9a8553e to
567f4a0
Compare
|
Thanks for your assistance with this one @midhunadarvin, should be good for re-test whenever suits 🙏 Edit: will revisit the failing svelte and angular tests. |
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.
| await expect(page.getByText('0', { exact: true })).toBeVisible(); | ||
|
|
||
| // log page contents | ||
| console.log(await page.content()); |
There was a problem hiding this comment.
Debug console.log accidentally left in test file
Low Severity
A console.log(await page.content()) statement was added to the maintains reactivity with large state test. This dumps the entire page HTML to the test output on every run, which is clearly leftover debugging code unrelated to the PR's purpose of adding deep memo comparison.
3 participants
Description
React.memo uses a shallow comparison, which isn't enough in this case.
Using welldone-software/why-did-you-render
I found our app home-screen content would update 12 times in one load with the wdyr message
"different objects that are equal by value".
This change adds a deep comparison, which when tested via patch-package, eliminated those re-renders.
Note: I tried to base this PR on the one that initially made these memo changes, hope it's okay :)
Screenshot
Note
Medium Risk
Changes render memoization and state update propagation in React Native paths, which can affect update behavior and performance; also adds a new runtime dependency (
react-fast-compare).Overview
Reduces unnecessary React Native re-renders by switching generated
BlockandBlockscomponents frommemo(Component)tomemo(Component, isEqual)usingreact-fast-compare, and wiringFlatListextraDatatobuilderContextso list items refresh when context changes.Fixes reactive state updates in
flattenStateby ensuringrootSetStatereceives a new object reference ({ ...target }) on nested and top-level writes, improving change detection in React/RN. Addsreact-fast-compareas a dependency and includes a patch changeset; also adds a debugconsole.log(page.content())to the large state e2e test.Written by Cursor Bugbot for commit 0a6d048. This will update automatically on new commits. Configure here.