useSelect second parameter

Short Answer

The second parameter for useSelect is the second parameter for useCallback, so check the React website and you’d understand what the heck that second parameter is.. 🙂

Long Answer

useSelect is a custom React hook which uses the core useCallback hook in React which returns a memoized callback which can avoid expensive calculations on every render, and if the second parameter for useSelect is provided, then as documented: ( deps is the second parameter, whereas mapSelect is the first parameter )

deps Array: If provided, this memoizes the mapSelect so the same mapSelect is invoked on every state change unless the dependencies
change.

And by “memoizes the mapSelect“, it means that useSelect will call useCallback like so: useCallback( mapSelect, deps ), and thus the second parameter for useSelect is actually the second parameter for useCallback, and:

• If deps is an empty array ([]), mapSelect will be memoized and never be recreated.

• If deps is a non-empty array (e.g. [ fooState ]), mapSelect will also be memoized, but recreated only if the dependency (fooState) is changed.

• If deps is not an array, mapSelect will not be memoized, hence it will always be recreated.

So that means, as long as an array is provided, the mapSelect will be memoized (or you can say that it’s being cached) so that on the next and all other renderings of the component, the same callback will be used instead of being created:

// Although these callbacks use the same code, they're not exactly the same.
const callback = ( a, b ) => a + b;
const callback2 = ( a, b ) => a + b;
console.log( callback === callback2 ); // false

// Same as above; these are not exactly the same.
const callback3 = function ( msg ) { alert( msg ); };
const callback4 = function ( msg ) { alert( msg ); };
console.log( callback3 === callback4 ); // false

// So because of that, the following callback will be created on the initial
// render and then recreated on the next renders.
const onClick = () => console.log( 'clicked' );

// Therefore, if your callback is "heavy", then you can memoize your callback
// using the useCallback hook. And for example, the following callback will be
// created only on the initial render and then it's memoized so that on the
// next renders, the callback is not recreated and instead, the memoized one
// is used.
const onClick2 = useCallback( () => console.log( 'clicked' ), [] );

^{PS: The above onClick callbacks are just for demonstration purposes. In actual implementation, you wouldn’t want to memoize such very basic code… because in that case, the optimization would cost more than not having it.}

Note about the empty array ([]) vs non-empty one (e.g. [id])

So React stated that:

The array of dependencies is not passed as arguments to the callback.
Conceptually, though, that’s what they represent: every value
referenced inside the callback should also appear in the dependencies
array.

Therefore, in the first example in the question, id is added as a dependency because it is referenced inside the callback, i.e. select( coreStore ).getMedia( id ), and if id isn’t in the dependencies array, then the id value will always be the initial/current value by the time useSelect is called, i.e. before the callback is memoized.