import { useRef , useCallback , useMemo } from 'react' ; import { htmlIdGenerator } from '@elastic/eui' ; const generateId = htmlIdGenerator ( ) ; param list returns export function useListKeys < T > ( list ) { const idStore = useRef < Map < T , string > > ( new Map ( ) ) ; const currentIdMap = useMemo ( ( ) => { const newMap = new Map ( ) ; list . forEach ( ( item ) => { if ( idStore . current . has ( item ) ) { newMap . set ( item , idStore . current . get ( item ) ! ) ; } else { const newId = generateId ( ) ; newMap . set ( item , newId ) ; } } ) ; idStore . current = newMap ; return idStore . current ; } , [ list ] ) ; return useCallback ( ( item ) : string => { const itemId = currentIdMap . get ( item ) ; if ( itemId ) { return itemId ; } throw new Error ( "Object not found. Make sure to pass the whole list to the hook and don't mutate the list with functions like push" ) ; } , [ currentIdMap ] ) ; }