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

coder-karen · 2025-03-13T17:12:16Z

Fixes #42434

Proposed changes:

This PR modifies how data is manipulated in several instances where they are included within useSelect calls. This prevents console warnings in the upcoming WordPress 6.8 release, if script debug is enabled.
More information in the parent issue: WordPress 6.8 compatibility: Audit and fix any direct data manipulation within useSelect #42421
The affected features / blocks:
- Blogging Prompt
- Button block
- Payment buttons
- Slideshow block
The changes include:
- Only the items that actually change get new references
- useMemo prevents unnecessary object creation, and only recalculates when dependencies actually change (usePassthroughAttributes)
- ProductManagementToolbarControl returns the selector's value directly without wrapping it in an object and only changes when getSelectedProducts returns a new object.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

On a self-hosted test site, to reproduce the issues on trunk:

Make sure script debug is enabled for your site: define( 'SCRIPT_DEBUG', true ); in wp-config.php.
Install the WordPress Beta Tester plugin
Go to Tools > Beta Testing, and set the plugin to use Beta/RC Only (in order to upgrade to WP 6.8-beta3)
Go to Dashboard > Updates, and update to WP 6.8-beta3.
Open up a new post. You will likely see other similar console warnings that will be addressed separately. However to replicate the warnings relevant to this PR:
- Add a Writing Prompt block, then check console errors. See below for what to look for.
- Clear the console and add a Slideshow block. As before, see below for what to look for in the console.
- Clear the console and add a Payments Button block. You may also need to add a new payment plan as well (which will involve connecting Stripe - there may be accounts in the SS that could be used for that)
In all cases you'll see a console warning similar to this: The useSelect hook returns different values when called with the same state and parameters. This can lead to unnecessary re-renders and performance issues if not fixed.
The writing prompt non-equal value key relates to tags, and the Error Component Stack begins with BloggingPromptEdit (note - the red tags post request console warning occurs on trunk as well, unrelated)
The Payments button block non-equal value key relates to selectedProducts, and the Error Component Stack begins with ProductManagementToolbarControl. The button block issue also visible with the Payments button block, has a non-equal value key of attributesToSync.
The Slideshow blocknon-equal value key relates to resizedImages.

To test the fix:

Apply this PR if testing locally (if using Jurassic Ninja or another test site, use the Jetpack Beta Tester plugin) and refresh the post after clearing the console. Those warnings should not appear. Ensure the block functionality is as expected.

You can also test on WoA and Simple (without testing WP 6.8) to ensure no issues with the blocks.

… in usePromptTags

… in useRelatedPosts

github-actions · 2025-03-13T17:13:14Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the update/jetpack-useSelect-data-maniupulation-instances branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/jetpack-useSelect-data-maniupulation-instances

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-03-13T17:13:18Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
WoA releases happen weekly.
Releases to self-hosted sites happen monthly:
- Scheduled release: April 1, 2025
- Code freeze: March 30, 2025

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

jp-launch-control · 2025-03-13T17:20:51Z

Code Coverage Summary

Coverage changed in 4 files.

File	Coverage	Δ%	Δ Uncovered
projects/plugins/jetpack/extensions/blocks/blogging-prompt/use-prompt-tags.js	0/44 (0.00%)	0.00%	14 💔
projects/plugins/jetpack/extensions/blocks/button/use-passthrough-attributes.js	9/18 (50.00%)	-33.33%	7 💔
projects/plugins/jetpack/extensions/blocks/slideshow/edit.js	23/59 (38.98%)	-4.15%	7 💔
projects/plugins/jetpack/extensions/shared/components/product-management-controls/toolbar-control.js	9/48 (18.75%)	-1.66%	0 💚

Full summary · PHP report · JS report

_{Coverage check overridden by

I don't care about code coverage for this PR
Use this label to ignore the check for insufficient code coveage.
.}

… in ProductManagementToolbarControl

… in usePassthroughAttributes

…ompt-tags.js

…-instances

… in SlideshowEdit

monsieur-z · 2025-03-19T20:40:14Z

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

+	// Get tags with memoized query
+	const tags = useSelect(
+		select => {
+			if ( tagIds.length === 0 ) {


Could that condition be moved out of the function passed to useSelect? Or would that create an issue?

So, useSelect itself can't be called conditionally. I believe we could miss important store updates when switching between states as well if we were able to use it conditionally.

monsieur-z · 2025-03-19T20:42:01Z

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

@@ -192,14 +192,35 @@ export const SlideshowEdit = ( {
 	);
 };

+const memoCache = new Map();


I'm wondering whether we should clear the map somewhere, maybe when SlideshowEdit unmounts. But that may be overkill.

Good thought, thank you. I looked into this more, and from what I understand it would be overkill based on page refresh that should clean this up so the cache is per session, and that the data is lightweight (only image id and size information, not remaining image information). And lastly in attempting to add this it was turning into a complex operation as well.
As for page refresh cleaning the data up, I could confirm this by adding window.debugMemoCache = memoCache; to the code, then logging this in the browser console before adding a block with images, and then after a page refresh. After the page refresh it defaults back to a size of 1. And if I remove the Slideshow ad refresh, the cache is gone.
So based on that I think most likely overkill here, would you agree?

Absolutely! Thanks for looking it up.

… most current data when updating

…tiple functions from it

coder-karen · 2025-03-20T08:40:04Z

Thanks for the reviews @monsieur-z ! Separately I realized there were a couple of other small improvements I could make, explained in the additional commit messages, so I've just pushed those changes now too.

…-instances

monsieur-z

LGTM! The code changes seem appropriate and the PR tested as expected (tested on a self-hosted site). I could no longer see the warnings except for that one.

coder-karen · 2025-03-20T16:11:22Z

Thanks @monsieur-z ! Yes that one is dealt with in a separate PR here: #42536

…-instances

ellatrix · 2025-03-20T18:14:41Z

I'm seeing these warnings in the console on Dotcom:

index.js:33 The `useSelect` hook returns different values when called with the same state and parameters.
This can lead to unnecessary re-renders and performance issues if not fixed.

Non-equal value keys: attributesToSync

Could it be related to this PR?

ellatrix · 2025-03-20T18:15:33Z

Or, maybe you just fixed that haha :D

coder-karen added 3 commits March 13, 2025 16:55

Prevent useSelect console warnings by changing how we manipulate data…

e071726

… in usePromptTags

Prevent useSelect console warnings by changing how we manipulate data…

ac4e43d

… in useRelatedPosts

changelog

4133fc8

coder-karen added [Status] In Progress [Type] Task labels Mar 13, 2025

coder-karen self-assigned this Mar 13, 2025

github-actions bot added [Block] Blogging Prompt [Block] Related Posts [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ labels Mar 13, 2025

coder-karen added 2 commits March 13, 2025 20:17

Prevent useSelect console warnings by changing how we manipulate data…

01aa10f

… in ProductManagementToolbarControl

Prevent useSelect console warnings by changing how we manipulate data…

f4ca5c6

… in usePassthroughAttributes

github-actions bot added the [Block] Button label Mar 13, 2025

coder-karen added 2 commits March 18, 2025 10:27

Use memoization for usePromptTags to prevent console warning

1fcef0b

Remove unneded Related Posts changes, and add better syntax in use-pr…

d344498

…ompt-tags.js

coder-karen marked this pull request as ready for review March 18, 2025 17:06

coder-karen added 2 commits March 18, 2025 17:06

Merge branch 'trunk' into update/jetpack-useSelect-data-maniupulation…

c956a65

…-instances

Prevent useSelect console warnings by changing how we manipulate data…

96ba631

… in SlideshowEdit

github-actions bot added the [Block] Slideshow label Mar 19, 2025

coder-karen requested a review from monsieur-z March 19, 2025 10:17

coder-karen added [Status] Needs Review This PR is ready for review. and removed [Status] In Progress labels Mar 19, 2025

monsieur-z reviewed Mar 19, 2025

View reviewed changes

coder-karen added 2 commits March 20, 2025 08:10

usePromptTags: use selector directly in handler, ensuring we're using…

66ace76

… most current data when updating

usePassThroughAttributes: call select once instead of destructing mul…

6b65559

…tiple functions from it

Merge branch 'trunk' into update/jetpack-useSelect-data-maniupulation…

544d41f

…-instances

monsieur-z approved these changes Mar 20, 2025

View reviewed changes

Merge branch 'trunk' into update/jetpack-useSelect-data-maniupulation…

143e9cd

…-instances

coder-karen added the I don't care about code coverage for this PR Use this label to ignore the check for insufficient code coveage. label Mar 20, 2025

coder-karen merged commit 4688a50 into trunk Mar 20, 2025
68 checks passed

coder-karen deleted the update/jetpack-useSelect-data-maniupulation-instances branch March 20, 2025 16:33

github-actions bot added this to the jetpack/14.5 milestone Mar 20, 2025

github-actions bot removed the [Status] Needs Review This PR is ready for review. label Mar 20, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

coder-karen commented Mar 13, 2025 •

edited

Loading

github-actions bot commented Mar 13, 2025 •

edited

Loading

github-actions bot commented Mar 13, 2025 •

edited

Loading

jp-launch-control bot commented Mar 13, 2025 •

edited

Loading

monsieur-z Mar 19, 2025

coder-karen Mar 20, 2025

monsieur-z Mar 19, 2025

coder-karen Mar 20, 2025

monsieur-z Mar 20, 2025

coder-karen commented Mar 20, 2025

monsieur-z left a comment

coder-karen commented Mar 20, 2025

ellatrix commented Mar 20, 2025

ellatrix commented Mar 20, 2025

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

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

Conversation

coder-karen commented Mar 13, 2025 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

github-actions bot commented Mar 13, 2025 • edited Loading

github-actions bot commented Mar 13, 2025 • edited Loading

jp-launch-control bot commented Mar 13, 2025 • edited Loading

Code Coverage Summary

monsieur-z Mar 19, 2025

Choose a reason for hiding this comment

coder-karen Mar 20, 2025

Choose a reason for hiding this comment

monsieur-z Mar 19, 2025

Choose a reason for hiding this comment

coder-karen Mar 20, 2025

Choose a reason for hiding this comment

monsieur-z Mar 20, 2025

Choose a reason for hiding this comment

coder-karen commented Mar 20, 2025

monsieur-z left a comment

Choose a reason for hiding this comment

coder-karen commented Mar 20, 2025

ellatrix commented Mar 20, 2025

ellatrix commented Mar 20, 2025

coder-karen commented Mar 13, 2025 •

edited

Loading

github-actions bot commented Mar 13, 2025 •

edited

Loading

github-actions bot commented Mar 13, 2025 •

edited

Loading

jp-launch-control bot commented Mar 13, 2025 •

edited

Loading