How to get react-virtualized Collection to update when re-rendered with new width and columnCount?

Question

Here are the cellSizeAndPositionGetter and render functions for my react component. My screen layout doesn't change when I resize the screen, but I can confirm through the console that the width and state.columnCount (used by cellSizeAndPositionGetter) are changing.

Is it possible to trigger a Collection update following parameter change (namely, width)? Or am I doing something wrong here?

Sidenote: react-virtualized List does update upon width parameter change.

cellSizeAndPositionGetter({index}) {
    const list = this.state.cardsList;
    const columnCount = this.state.columnCount;

    const columnPosition = index % (columnCount || 1);
    const datum = list[index]; 

    const height = datum.height;
    const width = CELL_WIDTH;
    const x = columnPosition * (GUTTER_SIZE + width);
    const y = this._columnYMap[columnPosition] || 0;

    this._columnYMap[columnPosition] = y + height + GUTTER_SIZE;

    return ({
        height,
        width,
        x,
        y
    });
}

...

render() {
    return (
        <div style={styles.subMain}>
            <AutoSizer >
                {({height, width}) => {
                    console.log(`width: ${width}`);
                    console.log(`col count: ${this.state.columnCount}`);
                    return (
                        <Collection
                            cellCount={this.state.cardsList.length}
                            cellRenderer={this.cellRenderer}
                            cellSizeAndPositionGetter={this.cellSizeAndPositionGetter}
                            height={height}
                            width={width}
                            overscanRowCount={1}
                        />
                    );
                }}
            </AutoSizer>
        </div>
    );
}

UPDATE: (a few hours later)

I discovered a very kludgy work-around to get react-virtualize Collection to update following a width parameter change.

When the screen size changes, I remove the last element of my list of Collection display elements (images). At first I tried clearing the list, but that causes obvious visual side-effects. Now, only the final image in my display flickers weirdly when resizing the screen.

But it would still be nice to get Collection to update following width change. :)

Here is the code that seems to trick Collection into updating. Key part is the third line of setState where I remove the last element.

updateDimensions() {
    this.setState({
        screenWidth: window.innerWidth,
        columnCount: Math.floor(window.innerWidth / (CELL_WIDTH + GUTTER_SIZE)),
        cardsList: [...this.state.cardsList.slice(0, this.state.cardsList.length - 1)] 
    });
}

componentDidMount() {
    ...
    window.addEventListener("resize", this.updateDimensions);
}

score 2 · Answer 1 · answered Jan 23 '17 at 17:35

Does a change in width mean reflowing the cells? (Do you want the size and position of cells inside of the Collection to change?) If so, you'll need to store a ref to the Collection and then call collectionRef.recomputeCellSizesAndPositions() when width changes.

Collection (like all other react-virtualized components) cache size and position information for performance. You need to explicitly clear those caches if things change. See here and here.

How to get react-virtualized Collection to update when re-rendered with new width and columnCount?

1 Answers1