React best practices and pitfalls

[gaambo]

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:

• the rules of hooks
• how do hooks work
• how do hooks impact re-renders
• how do contexts impact re-renders
• how do props impact re-renders of children (eg blocks have a lot of props and they change very frequently during editing)
• disadvantages of using/nesting many higher-order-components
• impact of SlotFills
• testing performance with react developer tools (see reasons for re-renders, measure,...)
• impact of filters (addAction, addFilter)
• impact of redux store subscriptions (eg to get the post type, but those subscriptions get called on every store change)

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

[bph]

The topic was approved, the discussion is locked and conversation moved to

• React best practices and pitfalls #217