Child Components Never Re-rendered using AutoSizer

I’m using the AutoSizer with the List as a child of it.

The problem I’m having is that the child virtual list is never re-rendered with new properties - I assume because the AutoSizer is declared “Pure” and as I don’t pass any properties to it directly it will never re-render as it doesn’t detect a change.

As shown below I have my main component called ComponentA whose render function contains an AutoSizer with a single child “List”.

The property “rowCount” on the List is driven by a property on ComponentA so we want the number of rows to change based on what is passed to ComponentA via props

class ComponentA {
	
	render() {
		<AutoSizer>
			{this.renderSizedList}
		</AutoSizer>	
	}

	private renderSizedList = (dims: Dimensions) => {
        const { width, height } = dims;

        return (
            <List
                width={width}
                height={height}
                rowHeight={64}
                rowCount={this.props.postFilteredRecordCount}
                rowRenderer=...
            />
        );
    }	
}

At the moment the only way I can get around this is to grab a reference to the AutoSizer when it mounts and then inside the React life-cycle event “componentWillReceiveProps” call “forceUpdate()” on it then it’s ok. But this doesn’t feel right.

So should the AutoSizer really be declared as Pure or is there some other way it should be used? The documentation is a little confusing in terms of it talking about how to use children via a “ChildComponent” property which I can’t see. I also can’t find any examples that do anything different from what I have above (where the “List” is specifically a child of the AutoSizer)

I have included a plunker example which is similar although it uses your template example with two lists. In the first list clicking the button increases the row height but in the second list which has an AutoSizer around it it doesn’t. The button handler included a commented out line which can be uncommented to highlight the workaround I’m having to use to get it working.

https://plnkr.co/edit/Pk7dH7?p=preview

[bvaughn]

The documentation is a little confusing in terms of it talking about how to use children via a “ChildComponent” property which I can’t see.

The docs don’t mention ChildComponent to my knowledge, other than a CHANGELOG entry for when that property was removed back in version 4.0.

Did you try what is mentioned in this section: https://github.com/bvaughn/react-virtualized#pure-components

Pass-thru props

The shallowCompare method will detect changes to any props, even if they aren’t declared as propTypes. This means you can also pass through additional properties that affect cell rendering to ensure changes are detected.

In your case, this could mean:

<AutoSizer rowCount={this.props.postFilteredRecordCount}>
  {this.renderSizedList}
</AutoSizer>	

[nata7che]

Is there any news concerning this issue? This is also something we came across (2022). Any help in solving this is highly appreciated 🙏🏻