chore(render): memoize create styles #1177
Closed
Conversation
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
Improving performance by creating a new `hv-element` component as a replacement for Render.renderElement. This allows memoizing the options and props of the component to reduce unneeded re-renders. [Asana](https://app.asana.com/1/47184964732898/project/1204008699308084/task/1210344460236268?focus=true)
Consolidate the logic between `src/services/render` and the new `hv-element` component. - Created a new utility to abstract the `null` render logic and logging - Update render service to use logic and then return the component - Update `hv-element` to use utility for logic and logging - Export `hv-element` for access outside Hyperview - Confirmed external use of `Hyperview.renderElement` with new logic still working (using existing nav-back demo) - Update `nav-back` demo to use component instead of function [Asana](https://app.asana.com/1/47184964732898/project/1204008699308084/task/1210368849843731?focus=true)
Creating a component which can replace the use of the render service `renderChildren`. Provides a mapping of child nodes to `<HvElement>` components. - [Created the new component](0ece9f6) - [Switched four element types from ts to tsx](dd518da) - Replaced `React.createElement` implementations with declarative instances [using the new component to render children](7c73c9b) - Updated the sticky header logic to use the rendered children and [added a verification of a valid `getAttribute`](65d8b20) [Asana](https://app.asana.com/1/47184964732898/project/1204008699308084/task/1210344460236290?focus=true) --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1210344460236290
Removing changes made to demo until the next HV release.
The updated code was causing an increase in "Each child in a list should have a unique key prop" warnings. It was determined that the legacy code used spreading over the child array which causes React to not issue the warning. [See documentation](https://react.dev/reference/react/createElement#:~:text=You%20should%20only,they%20never%20reorder.). This code temporarily reverts the various components which were throwing the warnings in the Hyperview demo. They should be restored at a later time to restore the intended functionality. - [Added a key to the \<HvElement\>](a6406bc) - [Reverted use of declarative syntax where needed](ec8e044) Relates to [Asana](https://app.asana.com/1/47184964732898/project/1205761271270033/task/1210424257505845?focus=true)
Collaborator
flochtililoch
left a comment
flochtililoch
left a comment
There was a problem hiding this comment.
Were you able to observe less re-renders with this refactor?
A couple of issues stand out to me:
- when components were converted from class to function, the former instance methods were not wrapped with
useCallback- this will cause the functions to be recreated on every render - I think the memoization for the style prop is unlikely to bring a performance boost at that level, since
props.stylesheetsis one of the dependencies that changes every time we inject new styles - I assume we will need memoization within the createStyleProp method itself.
Collaborator
Author
|
Closing in favor of improved approach: #1183 |
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.
To improve performance and reduce re-renders, memoize the styles created by
createStyleProp. This required converting several class components to functional.Asana