Data: A helpful performance warning for developers in the ‘useSelect’ hook

useSelect is a React hook that lets you subscribe to WordPress data in the block editor. It checks if consumed data has changed and then rerenders your components accordingly.

Usually, things just work, and consumers don’t have to worry about unnecessary rerenders. However, sometimes data is directly manipulated in the mapSelect callback, which can mislead the useSelect hook into thinking that the data has changed when it has not.

Example:

export function ExampleWithWarning() { const { nameAndIds } = useSelect( function mapSelect( select ) { const authors = select( ‘core’ ).getUsers( { who: ‘authors’, context: ‘view’, } ); return { // `Array.map` will return a