bvaughn / react-virtualized-auto-sizer

After replacing the AutoSizer component in react-virtualized with the AutoSizer from this library, I started seeing some "Can't perform a React state update on an unmounted component" console errors originating from the component. Specifically, the error seems to be pointing to the line scaledWidth: this.props.defaultWidth || 0, in the state initialization.

This error occurs most frequently when navigating to a different page (the autosized component is unmounted) during a resize operation. I tried recreating this scenario in a code-sandbox, but was unable to reproduce the issue.

Version: 1.0.17

Going to need a repro before I can do anything with this. Haven’t seen this error myself.

Regarding this error:

Can't perform a React state update on an unmounted component.

This is logged for components that have mounted and then unmounted, so I don't understand this claim:

Specifically, the error seems to be pointing to the line scaledWidth: this.props.defaultWidth || 0, in the state initialization.

If an update was scheduled by an unmounted (not yet mounted) component during initialization, React would warn with a different message:

Can't perform a React state update on a component that hasn't mounted yet.

That being said, the only place this component calls setState is in its _onResize callback:

react-virtualized-auto-sizer/src/AutoSizer.ts

Lines 173 to 178 in e678846

    
           this.setState({ 
        
             height, 
        
             width, 
        
             scaledHeight, 
        
             scaledWidth, 
        
           });

I assume this maybe relates to the fact that this component now uses ResizeObserver when supported:

react-virtualized-auto-sizer/src/AutoSizer.ts

Lines 48 to 53 in e678846

    
           if (typeof ResizeObserver !== "undefined") { 
        
             this._resizeObserver = new ResizeObserver(() => { 
        
               // Guard against "ResizeObserver loop limit exceeded" error; 
        
               // could be triggered if the state update causes the ResizeObserver handler to run long. 
        
               // See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55 
        
               setTimeout(this._onResize, 0);

I'm guessing your scenario has a component mounting and then immediately (synchronously?) unmounting, and auto-sizer sin't cancelling the pending timeout.

I added a likely fix for that in 827f0b6, given it's the only cause that made sense to me.

1.0.20

Thanks for the prompt reply and fix! I tried the new version, but unfortunately now I am getting the same error but on a different line.

Error Message:
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. at AutoSizer (webpack-internal:///./common/temp/node_modules/.pnpm/react-virtualized-auto-sizer@1.0.20_sfoxds7t5ydpegc3knd667wn6m/node_modules/react-virtualized-auto-sizer/dist/react-virtualized-auto-sizer.esm.js:227:5)

File Contents:

Honestly I have no clue what could be causing the error there, but maybe you do?

Share a repro and I'll look.

	if (typeof ResizeObserver !== "undefined") {
	this._resizeObserver = new ResizeObserver(() => {
	// Guard against "ResizeObserver loop limit exceeded" error;
	// could be triggered if the state update causes the ResizeObserver handler to run long.
	// See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55
	setTimeout(this._onResize, 0);