Memoize PickersActionBar

mui · Jan 3, 2025 · 84be0d3 · 84be0d3
1 parent f09a7a9
commit 84be0d3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx
@@ -36,7 +36,7 @@ const PickersActionBarRoot = styled(DialogActions, {
  *
  * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
  */
-function PickersActionBar(props: PickersActionBarProps) {
+function PickersActionBarComponent(props: PickersActionBarProps) {
   const { actions, ...other } = props;
 
   const translations = usePickerTranslations();
@@ -85,7 +85,7 @@ function PickersActionBar(props: PickersActionBarProps) {
   return <PickersActionBarRoot {...other}>{buttons}</PickersActionBarRoot>;
 }
 
-PickersActionBar.propTypes = {
+PickersActionBarComponent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -113,4 +113,6 @@ PickersActionBar.propTypes = {
   ]),
 } as any;
 
+const PickersActionBar = React.memo(PickersActionBarComponent);
+
 export { PickersActionBar };
diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx
@@ -55,7 +55,11 @@ const usePickerLayout = <TValue extends PickerValidValue>(
 
   // Action bar
   const ActionBar = slots?.actionBar ?? PickersActionBar;
-  const actionBarProps = useSlotProps({
+  const {
+    // PickersActionBar does not use it and providing it breaks memoization
+    ownerState: destructuredOwnerState,
+    ...actionBarProps
+  } = useSlotProps({
     elementType: ActionBar,
     externalSlotProps: slotProps?.actionBar,
     additionalProps: {