perf[react-native]: Memoized Blocks Component to free up UI thread. #3814
Conversation
🦋 Changeset detectedLatest commit: 5533720 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 |
|
View your CI Pipeline Execution ↗ for commit 5533720.
☁️ Nx Cloud last updated this comment at |
yash-builder
changed the title
| )); | ||
|
|
||
| // Optional: Give the component a display name for better debugging | ||
| RenderBlock.displayName = 'RenderBlock'; |
There was a problem hiding this comment.
🎯 suggestion:
Should we append block.id to the displayName as a identifier ?
There was a problem hiding this comment.
We can surely do that. But in this scenario I used this identifier for inspecting the component in React Devtools
| }; | ||
|
|
||
| // Moved outside and memoized | ||
| const RenderBlock = memo(({ |
There was a problem hiding this comment.
❔question:
We have used memo over Block component ( to get RenderBlock ) and then composed the RenderBlock with React.useCallback. Could you explain the logic here and how it works internally ?
- what happens if we use
memo/useCallbackin both places ?
There was a problem hiding this comment.
Great question!
- If Only
memoIs Used:
RenderBlockwill avoid re-renders, butFlatListmay still recreate the renderItem function on every render. This may lead to potential performance bottleneck. - If Only
useCallbackIs Used:
TherenderItemfunction will be stable, butRenderBlockwill re-render if its props are shallowly different, even when not required.
There was a problem hiding this comment.
Very well done! I'm Rewriting here what I sent you in Slack so we don't lose track of it.
One important thing is not to use overrides/* unless as a last resort because the file will quickly go out of sync with the original Blocks.lite.tsx, forcing us to maintain multiple copies of the same logic.
Here is a Loom showing how I'd tackle the ~3-4 changes in your PR and incorporate them into Mitosis plugins instead:
https://www.loom.com/share/94f1767796bd487bb48be41d9046e01f
Also, you need to add a changesets entry, which you can do by following https://github.com/BuilderIO/builder/blob/main/packages/sdks/PUBLISHING.md
There was a problem hiding this comment.
Code looks good! You're still missing the changesets entry https://github.com/BuilderIO/builder/blob/main/packages/sdks/PUBLISHING.md#1--add-changeset
Description
Suspense:Added
React.Suspenseto defer the rendering of theContentcomponent until it is fully loaded.Memoization:React.memoto memoize computationally expensive operations within theBlockscomponent. To prevents unnecessary recalculations of processed blocks during re-renders, reducing the load on the UI thread.Screenshot
Before:
After:
