Pitfalls working with @wordpress/data, useSelect and useDispatch and how to avoid those.

[bph]

Discussed in #184

^{Originally posted by bph December 14, 2023}
This post would be an updated rewrite of Jarda Snajdr post on his personal blog two years ago.0
adding a few more practices and patterns that address problems that Jarda witnessed causing performance issues recently.

The useSelect hook implementation itself has also evolved significantly in the last year or so, having been rewritten to use React 18’s useSyncExternalStore, and adding optimizations like granular subscriptions to individual stores or conditional “lazy” subscriptions.

It would be for a reader who is already familiar with @wordpress/data and useSelect and useDispatch, uses them successfully to write a custom block or plugin, but wants to improve their game and to learn more details.

Note: Discussion title is a work in progress... it will be fixed in review process.

[jsnajdr]

Looking forward to start working on the article! 🚀

[bph]

wonderful. Just assigned the topic to you, Jarda!

[jsnajdr]

Here's a draft of the article available for comments: https://docs.google.com/document/d/1gTuFwR0O2P4s8KZQ0VNy9tkVwhT1YBptL2WlLr0S-bM/edit

[ryanwelcher]

This is a great article @jsnajdr! I've left some comments/thoughts and am happy to discuss!

[jsnajdr]

This is now a draft post in WordPress: https://developer.wordpress.org/news/?p=3015&preview=1&_ppp=bad243e253

[bph]

Hi @jsnajdr here is the

Pre-publishing checklist: (updated 1/29/2024)

• Post Title and subheaders in sentence case
• Are Category or Categories selected?
• Are Tags identifies?
• Is there an explicit Excerpt?
• Are all images files uploaded to the media library
• Do all images have an alt-text?
• Assign or upload a featured image
• Props added? (See Guidelines)
• add copy for a social post as comment to this issue (example)
  🙌 Publish! 📗

Post-publishing checklist

• add Props for reviews to #props channel in WP Slack (Example) (use Slack handles)
• close the issue with a comment to link to the published post
• close the accompanying discussion with the link to the published post.

[jsnajdr]

Social copy:

Learn how to use the useSelect React hook more effectively. This article offers many tips and tricks and insights about this part of the @wordpress/data package.

[justintadlock]

I know this has already been reviewed, and we're close to publishing. But I just did a quick run-through the article, and something stood out to me as missing.

When or why should I (as the reader) use the useSelect() hook? It might not hurt to throw this into the introduction section. That way, it just gives the reader more of a sense of whether this is something they want to dive into.

[jsnajdr]

When or why should I (as the reader) use the useSelect() hook?

I added a sentence to the opening paragraph that describes where and why the hook is used -- in the UI components of the block editor and of custom blocks. That should make the article start less abruptly, and should give you some picture whether this is an area of WordPress development that you are interested in.

[bph]

Published 🙌 How to work effectively with the useSelect hook

[bph]

scheduled for April 22