perf(component drawer): optimize rendering the drawer content #9217
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
odedre
approved these changes
Sep 30, 2024
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.
This PR optimizes the rendering of the component drawer by correctly memoizing the data it needs to render. It also extracts the components that depend on data accessed via hooks to their own standalone pure functional components instead of being class methods, which impacts performance and unnecessary re rendering.
It updates the component tree to not invoke the useLanes hook from each of its node. Instead it passes down the lanes hook data from the drawer to each of its children node via a local context wrapped at the root of the tree - this drastically reduces the amount of unnecessary calls to the hook, resulting in nodes being rendered 10x faster when there are a lot of lanes and components (Previously, it would take ~400ms to render each node when its state changed; open/close -> with this change it takes about ~40-45ms for each render)