0PricingLogin
React Academy · Lesson

VariableSizeList: Dynamic Row Heights

Handle items of different heights with VariableSizeList and the itemSize callback pattern.

When Items Have Different Heights

Sometimes rows are not uniform: a chat list mixes short and long messages, or a feed has cards of varying content. FixedSizeList cannot handle this because it assumes one constant itemSize.

For these cases react-window offers a list type that lets each item declare its own size.

VariableSizeList Replaces FixedSizeList

VariableSizeList works like FixedSizeList but accepts a per-item size. You import it instead and provide a function that returns the size for any given index.

Everything else, the children render function and the critical style prop, stays the same, so the migration is small.

All lessons in this course

  1. The Large List Rendering Problem
  2. FixedSizeList: Rendering Thousands of Items
  3. VariableSizeList: Dynamic Row Heights
  4. Combining Virtualization with Data Fetching
← Back to React Academy