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 1 commit intoBuilderIO:mainfrom
Conversation
🦋 Changeset detectedLatest commit: 86699fe 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/react-native-76-fabric |
❌ Failed | 7m | View ↗ |
nx test @e2e/react-native-74 |
❌ Failed | 5m 59s | View ↗ |
nx test @snippet/react |
❌ Failed | 4m | View ↗ |
nx test @e2e/qwik-city |
✅ Succeeded | 8m 14s | View ↗ |
nx test @e2e/nextjs-sdk-next-app |
✅ Succeeded | 7m 56s | View ↗ |
nx test @e2e/angular-17 |
✅ Succeeded | 7m 27s | View ↗ |
nx test @e2e/nuxt |
✅ Succeeded | 6m 32s | View ↗ |
nx test @e2e/angular-17-ssr |
✅ Succeeded | 6m 19s | View ↗ |
Additional runs (38) |
✅ Succeeded | ... | View ↗ |
☁️ Nx Cloud last updated this comment at 2026-04-04 07:31:36 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! |
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.
- Use react-fast-compare for memo(Block, isEqual) and memo(Blocks, isEqual)
- Add extraData={builderContext} to FlatList for context change detection
- Fix flattenState to always mutate target before notifying rootSetState with a new object reference
jakequade-pc
force-pushed
the
perf-react-native-deep-memo-comparison
branch
from
0a6d048 to
86699fe
Compare
|
@midhunadarvin hello again :) are you able to run the E2E's on the branch again for me please? I've managed to get them passing locally. |
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 React Native rendering behavior by switching
React.memoto a deep comparator and tweaking state update semantics; could mask legitimate re-renders or add comparison overhead if misapplied.Overview
Reduces unnecessary re-renders in the React Native SDK by switching
BlockandBlocksfrom defaultReact.memoshallow comparison to a deep equality check viareact-fast-compare.Updates the React Native
BlocksFlatListgeneration to passextraData={builderContext}to ensure list items refresh when context changes, and adjustsflattenStateto callrootSetStatewith a new object reference ({ ...target }) so React/RN reliably detects state updates.Adds
react-fast-compareas a dependency and includes a patch changeset for@builder.io/sdk-react-native.Reviewed by Cursor Bugbot for commit 86699fe. Bugbot is set up for automated code reviews on this repo. Configure here.