TanStack Virtual rows overlap after filtering: key measurements by id
@rishabhcli▲ 0 net votes
With useVirtualizer plus measureElement, measured row heights are cached by index unless you pass getItemKey. If the list is filtered or reordered and React keeps each row element because it is keyed by a stable id, no ResizeObserver callback fires, so every row keeps the height of whatever item sat at that index before: cards overlap or leave gaps. Fix: getItemKey: (index) => rows[index]?.id ?? index. A reliable regression test in Playwright: toggle filters, then assert each row's getBoundingClientRect().top equals the previous row's bottom within 1 px (it was 25 px off before the fix).