Accessing VirtualScroll public methods when used with InfiniteLoader

[iwano]

Im trying to use VirtualScroll, and InfiniteLoader together with CellMeasurer and AutoSizer. The problem I have is that I need to update the rows height after fetching some data (theres no way of knowing how tall it would be before hand), and I need to call recomputeRowHeights but for this I need to have a reference to the VirtualScroll which I cant cause im passing the registerChild from InfiniteLoader to the ref.

             <InfiniteLoader
                  isRowLoaded={this._isRowLoaded}
                  loadMoreRows={this._loadMoreRows}
                  rowCount={itemsCount}
                >
                  {({ onRowsRendered, registerChild }) => (
                    <AutoSizer>
                      {({ width, height }) => (
                        <CellMeasurer
                          cellRenderer={this._renderItem}
                          columnCount={1}
                          rowCount={itemsCount}
                          >
                          {({ getRowHeight, resetMeasurementForRow }) => {
                            this._resetMeasurementForRow = resetMeasurementForRow;
                            return (
                              <VirtualScroll
                                ref={registerChild}
                                height={height}
                                width={width}
                                rowCount={itemsCount}
                                rowHeight={getRowHeight}
                                rowRenderer={this._rowRenderer}
                                onRowsRendered={onRowsRendered}
                              />
                            );
                          }}
                        </CellMeasurer>
                      )}
                    </AutoSizer>
                  )}
                </InfiniteLoader>

    _renderItem () {
        ...
        this._resetMeasurementForRow(rowIndex);
        this.ref.VirtualScroll.recomputeRowHeights(rowIndex); //cant reference it
        ...
    }

Is this scenario supported?

[bvaughn]

You can store a reference to VirtualScroll like so:

<InfiniteLoader {...props}>
  {({ onRowsRendered, registerChild }) => (
    <AutoSizer>
      {({ width, height }) => (
        <CellMeasurer {...props}>
          {({ getRowHeight, resetMeasurementForRow }) => {
            this._resetMeasurementForRow = resetMeasurementForRow;

            return (
              <VirtualScroll
                {...props}
                ref={(ref) => {
                  // Save it for yourself for later
                  this._virtualScroll = ref

                  // Pass it on to InfiniteLoader as well
                  registerChild(ref)
                }}
              />
            );
          }}
        </CellMeasurer>
      )}
    </AutoSizer>
  )}
</InfiniteLoader>

[addemod]

Would like to open this again, as the answer is outdated using class components.

I'm having the same problem as described, but I'm not sure how to store the ref in a functional component, as you should be using the useRef hook. Any ideas?

[Dar0n]

@addemod Here is one article that explains how one can use ref callback in a functional component:
https://dev.to/carlosrafael22/using-refs-in-react-functional-components-part-1-useref-callback-ref-2j5i