Jetpack: WordPress 6.8 Compatibility - Fix data manipulation within useSelect in core features

projects/plugins/jetpack/changelog/update-jetpack-useSelect-data-maniupulation-instances

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Compatibility: Ensuring performance best practices and reducing console warnings.

projects/plugins/jetpack/extensions/blocks/blogging-prompt/use-prompt-tags.js

@@ -1,6 +1,6 @@
 import apiFetch from '@wordpress/api-fetch';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useMemo } from '@wordpress/element';
 import { escapeHTML } from '@wordpress/escape-html';
 
 // Tries to create a tag or fetch it if it already exists.
@@ -31,30 +31,59 @@ export function usePromptTags( promptId, tagsAdded, setTagsAdded ) {
 	// Statuses are 'not-started', 'pending', 'fulfilled', or 'rejected'.
 	const promptTagRequestStatus = useRef( 'not-started' );
 
-	// Get information about tags for the edited post.
-	const { postType, postsSupportTags, tags, tagIds, tagsHaveResolved } = useSelect( select => {
-		const { getEditedPostAttribute } = select( 'core/editor' );
-		const { getEntityRecords, getPostType, hasFinishedResolution } = select( 'core' );
-		const _termIds = getEditedPostAttribute( 'tags' );
+	// Split into separate selectors to maintain referential equality
+	const postType = useSelect(
+		select => select( 'core/editor' ).getEditedPostAttribute( 'type' ),
+		[]
+	);
 
-		const query = {
+	const tagIds = useSelect(
+		select => select( 'core/editor' ).getEditedPostAttribute( 'tags' ) || [],
+		[]
+	);
+
+	const postsSupportTags = useSelect(
+		select => select( 'core' ).getPostType( 'post' )?.taxonomies?.includes( 'post_tag' ),
+		[]
+	);
+
+	// Memoize the query object
+	const query = useMemo( () => {
+		if ( tagIds.length === 0 ) {
+			return null;
+		}
+		return {
 			_fields: 'id,name',
 			context: 'view',
-			include: _termIds?.join( ',' ),
+			include: tagIds.join( ',' ),
 			per_page: -1,
 		};
+	}, [ tagIds ] );
 
-		return {
-			postType: getEditedPostAttribute( 'type' ),
-			postsSupportTags: getPostType( 'post' )?.taxonomies.includes( 'post_tag' ),
-			tagIds: _termIds || [],
-			tags: _termIds && _termIds.length ? getEntityRecords( 'taxonomy', 'post_tag', query ) : [],
-			tagsHaveResolved:
-				_termIds && _termIds.length
-					? hasFinishedResolution( 'getEntityRecords', [ 'taxonomy', 'post_tag', query ] )
-					: true,
-		};
-	}, [] );
+	// Get tags with memoized query
+	const tags = useSelect(
+		select => {
+			if ( tagIds.length === 0 ) {
+				return [];
+			}
+			return select( 'core' ).getEntityRecords( 'taxonomy', 'post_tag', query ) || [];
+		},
+		[ query, tagIds.length ]
+	);
+
+	const tagsHaveResolved = useSelect(
+		select => {
+			if ( tagIds.length === 0 ) {
+				return true;
+			}
+			return select( 'core' ).hasFinishedResolution( 'getEntityRecords', [
+				'taxonomy',
+				'post_tag',
+				query,
+			] );
+		},
+		[ query, tagIds.length ]
+	);
 
 	// Add the related prompt tags, if we're able and they haven't been added already.
 	useEffect( () => {

projects/plugins/jetpack/extensions/blocks/button/use-passthrough-attributes.js

@@ -1,30 +1,40 @@
 import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
-import { isEmpty, mapValues, pickBy } from 'lodash';
+import { isEmpty } from 'lodash';
 
 export default function usePassthroughAttributes( { attributes, clientId, setAttributes } ) {
 	// `passthroughAttributes` is a map of child/parent attribute names,
 	// to indicate which parent attribute values will be injected into which child attributes.
 	// E.g. { childAttribute: 'parentAttribute' }
 	const { passthroughAttributes } = attributes;
+	const attributesToSync = useSelect(
+		select => {
+			const { getBlockAttributes, getBlockRootClientId } = select( 'core/block-editor' );
+			const parentClientId = getBlockRootClientId( clientId );
+			const parentAttributes = getBlockAttributes( parentClientId ) || {};
 
-	const { attributesToSync } = useSelect( select => {
-		const { getBlockAttributes, getBlockRootClientId } = select( 'core/block-editor' );
-		// Check the root block from which the block is nested, that is, the immediate parent.
-		const parentClientId = getBlockRootClientId( clientId );
-		const parentAttributes = getBlockAttributes( parentClientId ) || {};
-		// Here we actually map the parent attribute value to the child attribute.
-		// E.g. { childAttribute: 'foobar' }
-		const mappedAttributes = mapValues( passthroughAttributes, key => parentAttributes[ key ] );
+			// Only compute if we have both parent attributes and passthrough mappings
+			if ( ! parentClientId || ! passthroughAttributes ) {
+				return {};
+			}
 
-		// Discard all equals attributes
-		const validAttributes = pickBy(
-			mappedAttributes,
-			( value, key ) => value !== attributes[ key ]
-		);
+			// Create new object only if values are different
+			let hasChanges = false;
+			const validAttributes = {};
 
-		return { attributesToSync: validAttributes };
-	} );
+			// Check each attribute mapping
+			Object.entries( passthroughAttributes ).forEach( ( [ childKey, parentKey ] ) => {
+				const parentValue = parentAttributes[ parentKey ];
+				if ( parentValue !== attributes[ childKey ] ) {
+					hasChanges = true;
+					validAttributes[ childKey ] = parentValue;
+				}
+			} );
+
+			return hasChanges ? validAttributes : {};
+		},
+		[ clientId, passthroughAttributes, attributes ]
+	);
 
 	useEffect( () => {
 		if ( ! isEmpty( attributesToSync ) ) {

projects/plugins/jetpack/extensions/blocks/slideshow/edit.js

@@ -192,14 +192,35 @@ export const SlideshowEdit = ( {
 	);
 };
 
+const memoCache = new Map();
+
 export default compose(
 	withSelect( ( select, props ) => {
-		const imageSizes = select( 'core/editor' ).getEditorSettings().imageSizes;
-		const resizedImages = props.attributes.ids.reduce( ( currentResizedImages, id ) => {
-			const image = select( 'core' ).getMedia( id );
+		const { getEditorSettings } = select( 'core/editor' );
+		const { ids } = props.attributes;
+
+		const imageSizes = getEditorSettings().imageSizes;
+
+		// Create cache key
+		const memoKey = ids.join( ',' );
+
+		if ( memoCache.has( memoKey ) ) {
+			return {
+				imageSizes,
+				resizedImages: memoCache.get( memoKey ),
+			};
+		}
+
+		// If not in cache, calculate new value
+		const { getMedia } = select( 'core' );
+		const resizedImages = ids.reduce( ( currentResizedImages, id ) => {
+			const image = getMedia( id );
 			const sizes = get( image, [ 'media_details', 'sizes' ] );
 			return [ ...currentResizedImages, { id, sizes } ];
 		}, [] );
+
+		memoCache.set( memoKey, resizedImages );
+
 		return {
 			imageSizes,
 			resizedImages,

projects/plugins/jetpack/extensions/shared/components/product-management-controls/toolbar-control.js

@@ -104,12 +104,10 @@ function NewProduct( { onClose } ) {
 export default function ProductManagementToolbarControl() {
 	const { products, productType, selectedProductIds } = useProductManagementContext();
 
-	const { selectedProducts } = useSelect( select => {
-		const { getSelectedProducts } = select( membershipProductsStore );
-		return {
-			selectedProducts: getSelectedProducts( selectedProductIds ),
-		};
-	} );
+	const selectedProducts = useSelect(
+		select => select( membershipProductsStore ).getSelectedProducts( selectedProductIds ),
+		[ selectedProductIds ]
+	);
 
 	let productDescription = null;
 	let subscriptionIcon = update;