0

I'm using a react-virtualized List component, which uses height data from CellMeasurerCache:

const cache = new CellMeasurerCache({fixedWidth: true, rowHeight: 150, minHeight: 50 });

This is the code for the list:

return (
  <div className={classes.maxHeight}>
    <AutoSizer>
      {({height, width}) =>
        <List
          className='List'
          height={height}
          width={width}
          overscanRowCount={5}
          rowCount={content.length}
          rowHeight={cache.rowHeight}
          rowRenderer={listRowRenderer(content)}>
        </List>
      }
    </AutoSizer>
  </div>);

The problem is that, sometimes the height is defaulting to minHeight, and i want it to use the actual computed height

See this image , the two cards have a default height of 50, when they should have a computed height based on their content. If I scroll down and back up, they will be computed properly, so should this be forced somehow or...?

The listRowRenderer:

const item = data[index];

return (
  <CellMeasurer
    cache={cache}
    columnIndex={0}
    key={key}
    rowIndex={index}
    parent={parent}>
    {({measure, registerChild}) =>
      <div ref={registerChild} style={style}>
        (content here)
      </div>
    }
  </CellMeasurer>
);

I even tried using the measure from CellMeasurer inside useEffect of the card component

user17299932
  • 1
  • 2
  • I also tried https://stackoverflow.com/a/47188992/17299932 , give each individual item it's own measure function, but that didn't work either – user17299932 Aug 15 '22 at 13:40
  • UPDATE: The height is actually fine, it's just that they are positioned way too close to eachother – user17299932 Aug 18 '22 at 11:05
  • UPDATE2: Found the problem. The components need to be re-rendered, somehow. Calling measure() IS the solution, but i can't find a proper place to call the measure function to make it work. Putting it in useEffect will NOT work, but if i put it behind a sleep, it WILL work, which is obviously not a solution but at least i now know that the measure function will fix things – user17299932 Aug 19 '22 at 13:55

1 Answers1

0

Turns out it's not okay to use 1 cache in multiple locations. I had an UI with 3 tabs, each tab loading virtualized data, and each tab used the same cache which messed things up. I gave each tab it's individual cache and voila it worked.

user17299932
  • 1
  • 2