fix: Perf: Prevent rerenders on the NetworkListMenu's NetworkListItems #30287
Conversation
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
|
This is presently failing because |
|
New error: clicking the three-dot menu of a menu and clicking "onEdit" bricks the extension due to not as many hooks being called, likely because the "Edit" mode renders a different set of UI. |
| onConfirm: () => undefined, | ||
| }), | ||
| ); | ||
| }, [canDeleteNetwork, dispatch, toggleNetworkMenu, showModal, network]); |
There was a problem hiding this comment.
You can further refine this callback by only including network.chainId instead of the full network.
There was a problem hiding this comment.
I'll push to get ESLint support for TS React files, that way we can "auto-fix"/auto-complete the dependency arrays
| }), | ||
| ); | ||
| setActionMode(ACTION_MODES.ADD_EDIT); | ||
| }, [dispatch, network, setEditedNetwork, setActionMode, ACTION_MODES]); |
There was a problem hiding this comment.
ACTION_MODES is an enum/constant created once outside of the component? If so then we don't necessarily need it in the dep array.
| ) : null} | ||
| <Box | ||
| className="multichain-network-list-menu" | ||
| hidden={!(showTestNetworks || currentlyOnTestNetwork)} |
There was a problem hiding this comment.
Very nice use of hidden here. This way we stabilise the child component, but this parent component can hide/show.
Just want to be potentially wary of doing this pattern everywhere, especially since this means that children are "mounted" and useFootGun useEffects could still be ran.
|
the build need to be fixed on this one |
salimtb
dismissed stale reviews from Prithpal-Sooriya and themself
via
b9e2aa6
|
just pushed a fix for the search feature , build should be green now Screen.Recording.2025-02-13.at.14.02.44.mov |
Builds ready [d5f30da]
Page Load Metrics (1613 ± 57 ms)
Bundle size diffs
|
Builds ready [3d7200f]
Page Load Metrics (1820 ± 100 ms)
Bundle size diffs
|
Description
The
NetworkListIteminstances inNetworkListMenuwere rerendering because the callbacks weren't usinguseCallback.Related issues
Fixes:
Manual testing steps
ENABLE_WHY_DID_YOU_RENDER=1 yarn startNetworkListItemin the consoleScreenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist