Skip to content

Commit 1054fe2

Browse files
inc2734inc2734
committed
#853 useSelect performance isseues
1 parent bb9948f commit 1054fe2

File tree

24 files changed

+315
-361
lines changed

24 files changed

+315
-361
lines changed

Diff for: ‎src/blocks/child-pages/edit.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414

1515
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
1616
import { useSelect } from '@wordpress/data';
17+
import { useMemo } from '@wordpress/element';
1718
import { __, sprintf } from '@wordpress/i18n';
1819
import ServerSideRender from '@wordpress/server-side-render';
1920

@@ -22,6 +23,8 @@ import { toNumber } from '@smb/helper';
2223

2324
import metadata from './block.json';
2425

26+
const EMPTY_ARRAY = [];
27+
2528
export default function ( { attributes, setAttributes, clientId } ) {
2629
const {
2730
title,
@@ -37,17 +40,21 @@ export default function ( { attributes, setAttributes, clientId } ) {
3740
parent,
3841
} = attributes;
3942

40-
const itemThumbnailSizeSlugOption = useSelect( ( select ) => {
43+
const imageSizes = useSelect( ( select ) => {
4144
const { getSettings } = select( 'core/block-editor' );
42-
const { imageSizes } = getSettings();
45+
const { imageSizes: _imageSizes } = getSettings();
46+
47+
return _imageSizes || EMPTY_ARRAY;
48+
}, [] );
4349

50+
const itemThumbnailSizeSlugOption = useMemo( () => {
4451
return imageSizes.map( ( imageSize ) => {
4552
return {
4653
value: imageSize.slug,
4754
label: imageSize.name,
4855
};
4956
} );
50-
}, [] );
57+
}, [ imageSizes ] );
5158

5259
const itemTitleTagNames = [ 'h2', 'h3', 'h4' ];
5360

Diff for: ‎src/blocks/container/edit.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,9 @@ export default function ( { attributes, setAttributes, className, clientId } ) {
2626
attributes;
2727

2828
const hasInnerBlocks = useSelect(
29-
( select ) => {
30-
const { getBlock } = select( 'core/block-editor' );
31-
const block = getBlock( clientId );
32-
return !! ( block && block.innerBlocks.length );
33-
},
29+
( select ) =>
30+
!! select( 'core/block-editor' ).getBlock( clientId )?.innerBlocks
31+
?.length,
3432
[ clientId ]
3533
);
3634

Diff for: ‎src/blocks/flex/edit.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,9 @@ export default function ( { attributes, setAttributes, className, clientId } ) {
1818
const { boxShadow, templateLock } = attributes;
1919

2020
const hasInnerBlocks = useSelect(
21-
( select ) => {
22-
const { getBlock } = select( 'core/block-editor' );
23-
const block = getBlock( clientId );
24-
return !! ( block && block.innerBlocks.length );
25-
},
21+
( select ) =>
22+
!! select( 'core/block-editor' ).getBlock( clientId )?.innerBlocks
23+
?.length,
2624
[ clientId ]
2725
);
2826

Diff for: ‎src/blocks/grid/edit.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,9 @@ export default function ( { attributes, setAttributes, className, clientId } ) {
4040
} = attributes;
4141

4242
const hasInnerBlocks = useSelect(
43-
( select ) => {
44-
const { getBlock } = select( 'core/block-editor' );
45-
const block = getBlock( clientId );
46-
return !! ( block && block.innerBlocks.length );
47-
},
43+
( select ) =>
44+
!! select( 'core/block-editor' ).getBlock( clientId )?.innerBlocks
45+
?.length,
4846
[ clientId ]
4947
);
5048

Diff for: ‎src/blocks/hero-header/edit.js

+13-20
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,6 @@ export default function ( {
122122
name,
123123
attributes,
124124
setAttributes,
125-
isSelected,
126125
className,
127126
clientId,
128127
} ) {
@@ -160,11 +159,9 @@ export default function ( {
160159
} = attributes;
161160

162161
const hasInnerBlocks = useSelect(
163-
( select ) => {
164-
const { getBlock } = select( blockEditorStore );
165-
const block = getBlock( clientId );
166-
return !! ( block && block.innerBlocks.length );
167-
},
162+
( select ) =>
163+
!! select( 'core/block-editor' ).getBlock( clientId )?.innerBlocks
164+
?.length,
168165
[ clientId ]
169166
);
170167

@@ -184,21 +181,17 @@ export default function ( {
184181
setIsShowPlaceholder( ! hasInnerBlocks && ! mediaUrl );
185182
}, [ mediaUrl, hasInnerBlocks ] );
186183

187-
const { imageSizes, image } = useSelect(
188-
( select ) => {
189-
const { getSettings } = select( blockEditorStore );
190-
return {
191-
image:
192-
mediaId && isSelected
193-
? select( 'core' ).getMedia( mediaId, {
194-
context: 'view',
195-
} )
196-
: null,
197-
imageSizes: getSettings()?.imageSizes,
198-
};
199-
},
184+
const imageSizes = useSelect(
185+
( select ) => select( 'core/block-editor' ).getSettings()?.imageSizes,
186+
[]
187+
);
200188

201-
[ isSelected, mediaId, clientId ]
189+
const image = useSelect(
190+
( select ) =>
191+
mediaId
192+
? select( 'core' ).getMedia( mediaId, { context: 'view' } )
193+
: null,
194+
[ mediaId ]
202195
);
203196

204197
const multipleOriginColorsAndGradients =

Diff for: ‎src/blocks/items/item/banner/edit.js

+11-16
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ export default function ( {
4444
setAttributes,
4545
isSelected,
4646
className,
47-
clientId,
4847
} ) {
4948
const {
5049
title,
@@ -75,21 +74,17 @@ export default function ( {
7574
// re-renders when the popover's anchor updates.
7675
const [ popoverAnchor, setPopoverAnchor ] = useState( null );
7776

78-
const { imageSizes, image } = useSelect(
79-
( select ) => {
80-
const { getSettings } = select( 'core/block-editor' );
81-
return {
82-
image:
83-
imageID && isSelected
84-
? select( 'core' ).getMedia( imageID, {
85-
context: 'view',
86-
} )
87-
: null,
88-
imageSizes: getSettings()?.imageSizes,
89-
};
90-
},
91-
92-
[ isSelected, imageID, clientId ]
77+
const imageSizes = useSelect(
78+
( select ) => select( 'core/block-editor' ).getSettings()?.imageSizes,
79+
[]
80+
);
81+
82+
const image = useSelect(
83+
( select ) =>
84+
imageID
85+
? select( 'core' ).getMedia( imageID, { context: 'view' } )
86+
: null,
87+
[ imageID ]
9388
);
9489

9590
const imageSizeOptions = imageSizes

Diff for: ‎src/blocks/items/item/block-link/edit.js

+11-16
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,6 @@ export default function ( {
108108
setAttributes,
109109
isSelected,
110110
className,
111-
clientId,
112111
} ) {
113112
const {
114113
titleTagName,
@@ -165,21 +164,17 @@ export default function ( {
165164
setIsEditingHref( false );
166165
}
167166

168-
const { imageSizes, image } = useSelect(
169-
( select ) => {
170-
const { getSettings } = select( 'core/block-editor' );
171-
return {
172-
image:
173-
imageID && isSelected
174-
? select( 'core' ).getMedia( imageID, {
175-
context: 'view',
176-
} )
177-
: null,
178-
imageSizes: getSettings()?.imageSizes,
179-
};
180-
},
181-
182-
[ isSelected, imageID, clientId ]
167+
const imageSizes = useSelect(
168+
( select ) => select( 'core/block-editor' ).getSettings()?.imageSizes,
169+
[]
170+
);
171+
172+
const image = useSelect(
173+
( select ) =>
174+
imageID
175+
? select( 'core' ).getMedia( imageID, { context: 'view' } )
176+
: null,
177+
[ imageID ]
183178
);
184179

185180
const imageSizeOptions = imageSizes

Diff for: ‎src/blocks/items/item/standard/edit.js

+11-16
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ export default function ( {
4343
setAttributes,
4444
isSelected,
4545
className,
46-
clientId,
4746
} ) {
4847
const {
4948
titleTagName,
@@ -79,21 +78,17 @@ export default function ( {
7978
// re-renders when the popover's anchor updates.
8079
const [ popoverAnchor, setPopoverAnchor ] = useState( null );
8180

82-
const { imageSizes, image } = useSelect(
83-
( select ) => {
84-
const { getSettings } = select( 'core/block-editor' );
85-
return {
86-
image:
87-
imageID && isSelected
88-
? select( 'core' ).getMedia( imageID, {
89-
context: 'view',
90-
} )
91-
: null,
92-
imageSizes: getSettings()?.imageSizes,
93-
};
94-
},
95-
96-
[ isSelected, imageID, clientId ]
81+
const imageSizes = useSelect(
82+
( select ) => select( 'core/block-editor' ).getSettings()?.imageSizes,
83+
[]
84+
);
85+
86+
const image = useSelect(
87+
( select ) =>
88+
imageID
89+
? select( 'core' ).getMedia( imageID, { context: 'view' } )
90+
: null,
91+
[ imageID ]
9792
);
9893

9994
const imageSizeOptions = imageSizes

Diff for: ‎src/blocks/limited-datetime/edit.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,9 @@ export default function ( { attributes, setAttributes, className, clientId } ) {
2727
attributes;
2828

2929
const hasInnerBlocks = useSelect(
30-
( select ) => {
31-
const { getBlock } = select( 'core/block-editor' );
32-
const block = getBlock( clientId );
33-
return !! ( block && block.innerBlocks.length );
34-
},
30+
( select ) =>
31+
!! select( 'core/block-editor' ).getBlock( clientId )?.innerBlocks
32+
?.length,
3533
[ clientId ]
3634
);
3735

Diff for: ‎src/blocks/media-text/edit.js

+13-19
Original file line numberDiff line numberDiff line change
@@ -80,29 +80,23 @@ export default function ( {
8080
} = attributes;
8181

8282
const hasInnerBlocks = useSelect(
83-
( select ) => {
84-
const { getBlock } = select( 'core/block-editor' );
85-
const block = getBlock( clientId );
86-
return !! ( block && block.innerBlocks.length );
87-
},
83+
( select ) =>
84+
!! select( 'core/block-editor' ).getBlock( clientId )?.innerBlocks
85+
?.length,
8886
[ clientId ]
8987
);
9088

91-
const { imageSizes, image } = useSelect(
92-
( select ) => {
93-
const { getSettings } = select( 'core/block-editor' );
94-
return {
95-
image:
96-
mediaId && isSelected
97-
? select( 'core' ).getMedia( mediaId, {
98-
context: 'view',
99-
} )
100-
: null,
101-
imageSizes: getSettings()?.imageSizes,
102-
};
103-
},
89+
const imageSizes = useSelect(
90+
( select ) => select( 'core/block-editor' ).getSettings()?.imageSizes,
91+
[]
92+
);
10493

105-
[ isSelected, mediaId, clientId ]
94+
const image = useSelect(
95+
( select ) =>
96+
mediaId
97+
? select( 'core' ).getMedia( mediaId, { context: 'view' } )
98+
: null,
99+
[ mediaId ]
106100
);
107101

108102
const imageSizeOptions = imageSizes

Diff for: ‎src/blocks/panels/item/horizontal/edit.js

+11-20
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,7 @@ export function getUpdatedLinkAttributes( {
100100
};
101101
}
102102

103-
export default function ( {
104-
attributes,
105-
setAttributes,
106-
isSelected,
107-
clientId,
108-
} ) {
103+
export default function ( { attributes, setAttributes, isSelected } ) {
109104
const {
110105
titleTagName,
111106
title,
@@ -164,21 +159,17 @@ export default function ( {
164159
setIsEditingHref( false );
165160
}
166161

167-
const { imageSizes, image } = useSelect(
168-
( select ) => {
169-
const { getSettings } = select( 'core/block-editor' );
170-
return {
171-
image:
172-
imageID && isSelected
173-
? select( 'core' ).getMedia( imageID, {
174-
context: 'view',
175-
} )
176-
: null,
177-
imageSizes: getSettings()?.imageSizes,
178-
};
179-
},
162+
const imageSizes = useSelect(
163+
( select ) => select( 'core/block-editor' ).getSettings()?.imageSizes,
164+
[]
165+
);
180166

181-
[ isSelected, imageID, clientId ]
167+
const image = useSelect(
168+
( select ) =>
169+
imageID
170+
? select( 'core' ).getMedia( imageID, { context: 'view' } )
171+
: null,
172+
[ imageID ]
182173
);
183174

184175
const imageSizeOptions = imageSizes

0 commit comments

Comments
 (0)