CODEWITHSUNDEEP
reactjsreact-virtualized
pierreaurelemartin
pierreaurelemartin

Reputation: 1682

React-virtualized: ignore rows when calcRowHeight return 0

I am using react-virtualized to render big array in a multigrid. It looks something like that : 

class ImportContainer extends React.Component<IImportContainerProps, IImportContainerState> {

  grid;

  componentDidUpdate(prevProps) {
    if (prevProps.toggleState !== this.props.toggleState) {
      this.refreshGridRows(0, 0);
    }
  }

  componentWillUnmount() {
  }

  refreshGridRows = (start: number = 0, end: number = (this.state.gridRowCount - this.state.fixedRowCount)) => {
    this.grid.recomputeGridSize({columnIndex: this.state.fixedColumnCount, rowIndex: 0});
  }

  calcRowHeight = (I) => { 
    if (this.state.myData[I.index].randomBool === this.props.toggleState) {
      return 0;
    } else {
      return 25;
    }
  }

  render() {

    return <>
      <AutoSizer>
        {({ height, width }) => <MultiGrid
          ref={this._setRef}
          rowHeight={this.calcRowHeight}
          [...]
        />
        }
      </AutoSizer>
    </>;
  }
}

export default ImportContainer;

this is vastly simplified but the main concept is there.

So I toggle this.props.toggleState, trigger a recomputeGridSize and then this.calcRowHeight will show / or hide the wanted rows. A simple way to filter data.

It works fine with small set. But, when working on huge set in which the first 2K rows needs to be hidden (for example), I've found out that react-virtualized is rendering the first 2K rows (as their height is 0, it doesn't consider those as visible and thus continue to render) which is overloading the browser memory.

At this point, I don't know what to do... I can not change my dataset unfortunatly. How could I tell react-virtualized to not render a row (a subset of cells in my multigrid) when height === 0 ?

thanks a lot,

Upvotes: 1

Views: 837

Answers (1)

pierreaurelemartin
pierreaurelemartin

Reputation: 1682

It is (or was) a known bug of react-virtualized. The trick was to set an height of 0.1px so it'll produce an 'invisible' row. On thousand of rows, the display quality was acceptable. The best solution is still to produce a new dataset if possible.

Upvotes: 1

Related Questions