Skip to content

Commit b1b5764

Browse files
kyledurandhenryyi
andauthored
[Page] Use state callback in measure actions (#7361)
Partial fix for #7330 [Spin link](https://admin.web.web-1mvc.kyle-durand.us.spin.dev/store/) Part two might be a css based fix. The heavy re-rendering in the admin introduced with the React 18 work is causing a ton of layout thrashing in this component. The root cause will definitely need to be fixed but we'll do what we can on our end in the meantime Co-authored-by: Henry Yi <[email protected]>
1 parent b0445cf commit b1b5764

File tree

2 files changed

+17
-7
lines changed

2 files changed

+17
-7
lines changed

.changeset/grumpy-zoos-sleep.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
Use state callback in page actions

polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,19 @@ export function Actions({actions = [], groups = [], onActionRollup}: Props) {
8080
actionsAndGroups.length - 1,
8181
);
8282
}
83-
const showable = actionsAndGroups.slice(0, measuredActions.showable.length);
84-
const rolledUp = actionsAndGroups.slice(
85-
measuredActions.showable.length,
86-
actionsAndGroups.length,
87-
);
8883

89-
setMeasuredActions({showable, rolledUp});
90-
}, [actions, groups, measuredActions.showable.length]);
84+
setMeasuredActions((currentMeasuredActions) => {
85+
const showable = actionsAndGroups.slice(
86+
0,
87+
currentMeasuredActions.showable.length,
88+
);
89+
const rolledUp = actionsAndGroups.slice(
90+
currentMeasuredActions.showable.length,
91+
actionsAndGroups.length,
92+
);
93+
return {showable, rolledUp};
94+
});
95+
}, [actions, groups]);
9196

9297
const measureActions = useCallback(() => {
9398
if (

0 commit comments

Comments
 (0)