eslint-plugin does not validate dependencies in useSelect and useSuspenseSelect hooks

[ecgan]

What problem does this address?

useSelect and useSuspenseSelect hooks in https://www.npmjs.com/package/@wordpress/data have dependencies array as their second parameters. The dependencies array is eventually passed to useCallback in:

gutenberg/packages/data/src/components/use-select/index.js

Line 183 in 8be5532

const selector = useCallback( mapSelect, deps );

For normal React hooks like useCallback above, we already have 'react-hooks/exhaustive-deps': 'warn' in https://www.npmjs.com/package/@wordpress/eslint-plugin to help us declare all the dependencies.

However, the eslint-plugin does not validate dependencies for our custom useSelect and useSuspenseSelect hooks. This causes issues when developers miss a dependency when using those hooks.

To see this issue in action, find a useSelect usage in the code base, and add or remove an item in its dependencies array. There is no eslint error or warning about the dependencies. Note that you may need to reload the editor window to re-run eslint.

Here's an example: when we remove the clientId in the dependency array in the following useSelect usage, there is no warning or error.

gutenberg/packages/block-library/src/search/edit.js

Lines 83 to 93 in 361f257

	const insertedInNavigationBlock = useSelect(
	( select ) => {
	const { getBlockParentsByBlockName, wasBlockJustInserted } =
	select( blockEditorStore );
	return (
	!! getBlockParentsByBlockName( clientId, 'core/navigation' )
	?.length && wasBlockJustInserted( clientId )
	);
	},
	[ clientId ]
	);

What is your proposed solution?

Make the eslint-plugin validate all the dependencies in useSelect and useSuspenseSelect hooks.

This can be done by modifying the following line:

gutenberg/packages/eslint-plugin/configs/react.js

Line 37 in 8be5532

'react-hooks/exhaustive-deps': 'warn',

to:

		'react-hooks/exhaustive-deps': [
			'warn',
			{
				additionalHooks: '(useSelect|useSuspenseSelect)',
			},
		],

Reference: https://www.npmjs.com/package/eslint-plugin-react-hooks#advanced-configuration

[ecgan]

I will create a PR with the proposed solution to address this issue.