React hook for creating callback functions in a loop to pass to individual components

useKeyedCallback.tsx

import {memoize} from "lodash"

/**
 * Helper for passing a callback to each component in a loop. Given a callback
 * with the signature (key, ..args), returns a new factory with the signature
 * (key) => (...args). When called with a key, returns a wrapper function taking
 * (...args) wich calls the original callback. This wrapper function is guaranteed
 * to be the same for any given key.
 *
 * The callback must have NO dependencies that might change between renders. It
 * can only use useState setters, useRef references, etc.
 */
const useKeyedCallback = function<
	Ret,
	Key,
	Args extends Array<any>
>(
	callback: (key: Key, ...args: Args) => Ret,
):
	(key: Key) => (...args: Args) => Ret
{
	return React.useMemo(() => memoize((key) => (...args) => callback(key, ...args)), [])
}