diff --git a/src/hooks/useItemKey.ts b/src/hooks/useItemKey.ts index 07737e5..5bd64c4 100644 --- a/src/hooks/useItemKey.ts +++ b/src/hooks/useItemKey.ts @@ -1,9 +1,10 @@ -import type * as React from 'react'; -import { useEvent } from '@rc-component/util'; +import * as React from 'react'; import type { RowKey } from '../List'; export default function useItemKey(rowKey: RowKey) { - return useEvent((item: T): React.Key => - typeof rowKey === 'function' ? rowKey(item) : (item[rowKey] as React.Key), + return React.useCallback( + (item: T): React.Key => + typeof rowKey === 'function' ? rowKey(item) : (item[rowKey] as React.Key), + [rowKey], ); } diff --git a/tests/listy.behavior.test.tsx b/tests/listy.behavior.test.tsx index 548f3b4..ec58f11 100644 --- a/tests/listy.behavior.test.tsx +++ b/tests/listy.behavior.test.tsx @@ -131,6 +131,36 @@ describe('Listy behaviors', () => { expect(lastProps.data).toEqual([]); }); + it('updates virtual row keys when rowKey changes', () => { + const items = [{ id: 1, slug: 'first' }]; + const itemRender = (item: (typeof items)[number]) =>
{item.id}
; + const { rerender } = render( + , + ); + + expect(MockedVirtualList.__getLastProps().data[0].taggedKey).toBe('item:1'); + + rerender( + , + ); + + expect(MockedVirtualList.__getLastProps().data[0].taggedKey).toBe( + 'item:first', + ); + }); + it('wraps virtual items with item class', () => { const { container } = renderList();