Can't get ref= to work properly

Hi There! Big fan of the library so far. I’m having an issue getting the ref logic to work for the scrollTo functionality (trying to mimic ScrollSync functionality from react-virtualized).

Also, please let me know if this is a poor use of issues.

React Version: “16.4.2” React Window: “1.1.2”

The <Grid> component is calling this.syncHeaderScroll in the onScroll prop.

I was hoping syncHeaderScroll would look something like this:

  syncHeaderScroll = ({ scrollLeft }) => {
    if (this.listRef.current) {
      this.listRef.current.scrollTo(scrollLeft)
    }
  }

I’m trying to make sure I’m not missing anything. When I console.log this.listRef.current I’m just getting null.

Code snippet here:

export class ActivityStream extends PureComponent {
  listRef = React.createRef()

  syncHeaderScroll = ({ scrollLeft }) => {
    console.log("this.listRef.current", this.listRef.current)
  }

  render() {
    return (
      <Fragment>
        <List
          direction="horizontal"
          ref={this.listRef}
          height={HEADER_HEIGHT}
          itemCount={ACTIVITY_STREAM_HEADERS.length}
          itemData={ACTIVITY_STREAM_HEADERS}
          itemSize={index => ACTIVITY_STREAM_COLUMN_WIDTHS[index]}
          width={tableWidth}
        >
          {props => <HeaderRenderer filters={filters} onOpenFilter={this.handleOpen} {...props} />}
        </List>

        <Grid
          columnCount={ACTIVITY_STREAM_HEADERS.length}
          columnWidth={index => ACTIVITY_STREAM_COLUMN_WIDTHS[index]}
          estimatedRowHeight={DEFAULT_ROW_HEIGHT}
          height={windowHeight - 250}
          itemData={itemData}
          overscanCount={10}
          rowCount={rowData.length}
          rowHeight={index => {
            const { first_session_activity, last_session_activity } = rowData[index]

            if (first_session_activity && last_session_activity) {
              return DEFAULT_ROW_HEIGHT + DIVIDER_BOTTOM_MARGIN + BORDER_WIDTH * 2
            }

            if (first_session_activity) {
              return DEFAULT_ROW_HEIGHT + DIVIDER_BOTTOM_MARGIN + BORDER_WIDTH
            }

            if (last_session_activity) {
              return DEFAULT_ROW_HEIGHT + BORDER_WIDTH
            }

            return DEFAULT_ROW_HEIGHT
          }}
          width={tableWidth}
          onScroll={this.syncHeaderScroll}
        >
          {ItemRenderer}
        </Grid>
      </Fragment>
    )
  }

[danvk]

FWIW I had a similar issue which I resolved by putting ref.current in my deps list for useEffect rather than ref.

[levrik]

@gautamits That’s what I ended up with back then already as well.