-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React best practices and pitfalls #217
Comments
@gaambo thank you for submitting the topic. It as approved at today's Editorial Group meeting. Would you please comment on this issue so it can be assigned to you as the writer. (GitHub is quirky that way) |
If you haven't seen those pages yet.: |
Just wanted to add, those are some of the commits I find interesting: It seems @ellatrix made a lot of commits for improved performance with store subscriptions/selectors. So maybe she can give some input :) |
It boils down to: adding block editor store subscriptions should be avoided inside blocks. If necessary, try adding it only for the selected block. You can early return in the useSelect callback. |
Discussed in #205
Originally posted by gaambo January 12, 2024
I think a lot of WordPress developers are pretty familiar with PHPs pitfalls and things that can impact performance. Also PHP is kind of "easy" to debug being server-side (eg with xdebug).
But this knowledge often cannot be transferred to react since it runs on the client and completely different things impact performance in react (eg hooks, things causing too many re-renders etc). I think these things become more important with more and more UI being migrated to react. When a lot of plugins provide components, subscribe to redux store actions etc the browser has to handle more and more workload. And we should do our best to optimize that code.
The idea came to me, when I saw that Gutenberg v17.4.0 contained some bug fixes for moving useSelect calls (eg WordPress/gutenberg#57240, WordPress/gutenberg#57358, WordPress/gutenberg#57077, WordPress/gutenberg#57032)
React performance best practices are a difficult topic and probably not one that can be explained in one single blog post. But the post could still be a starting point for some things and then maybe link to the react documentation.
Some ideas:
Maybe a part of the project could also be to revisit existing examples in the block development documentation and open issues to fix those as well.
I'm not a react pro myself, and struggle with these topics as well. So I think this post could best be written by a real react developer. But I would be happy to help and learn things on the way as well.
I think related topics could be #184 #78
The text was updated successfully, but these errors were encountered: