Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`AutoSizer`)

[monkeyArms]

I am having issues with the HTML5Table component when the data prop is updated.

Console error (Firefox):

react_devtools_backend.js:6:7472

Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`AutoSizer`). To locate the bad setState() call inside `AutoSizer`, follow the stack trace as described in https://fb.me/setstate-in-render
    in AutoSizer (created by Measurer)
    in Measurer (created by ForwardRef)
    in div (created by ForwardRef)
    in ForwardRef
    in ForwardRef (created by Html5Table)
    in Html5Table (created by EditableTable)
{...snip...}
    React 5
        Measurer window-table.esm.js:438
        render window-table.esm.js:382
    React 8
        unstable_runWithPriority scheduler.development.js:653
    React 6
        componentDidUpdate EditableTableUI.js:107

Code below:

WindowTableTest.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Html5Table} from 'window-table';


/**
 *
 */
class WindowTableTest extends Component
{
	constructor( props )
	{
		super( props );

		this.state = {
			items:        this.props.items,
			tableData:    [],
			tableColumns: [],
		};
	}

	componentDidUpdate( prevProps, prevState, snapshot )
	{
		const { items } = this.props;

		if (prevProps.items !== this.props.items) {
			this.setState( {
				items:        items,
				tableColumns: this.buildTableColumns(),
				tableData:    this.buildTableData( items ),
			} );
		}
	}

	buildTableColumns()
	{
		return [
			{
				key:   'foo',
				title: 'Foo',
				width: 50
			},
			{
				key:   'bar',
				title: 'Bar',
				width: 50
			}
		];
	}

	buildTableData( items )
	{
		return items.map( item =>
		{
			return {
				foo: item.foo,
				bar: item.bar
			};
		} );
	}

	render()
	{
		const { tableData, tableColumns } = this.state;

		return (
			<Html5Table
				data={tableData}
				columns={tableColumns}
				headerClassName="thead"
			/>
		);
	}
}

WindowTableTest.propTypes = {
	items: PropTypes.array
};

export default WindowTableTest;

PageTest.js:

import React, {Component} from 'react';
import WindowTableTest from './WindowTableTest';


/**
 *
 */
class PageTest extends Component
{
	constructor( props )
	{
		super( props );

		this.state = {
			items: []
		};
	}

	componentDidMount()
	{
		// simulate an async request, such as an api call that populates items

		setTimeout( () =>
		{
			this.setState( {
				items: [
					{
						foo: 1,
						bar: 2,
					}
				]
			} );
		}, 1000 );
	}

	render()
	{
		return (
			<WindowTableTest items={this.state.items} />
		);
	}
}

export default PageTest;

Using window-table 0.12.1 and React 16.13.1.

[Pubudu Dodangoda]

Hey @monkeyArms Thank you for reporting the issue. Do you get the same error in chrome as well?

[monkeyArms]

Yes - same error in Chrome & Edge.

[monkeyArms]

I looked into this a bit more, and updating the data prop is not the issue. I have a minimal example here that displays the console error.

[Pubudu Dodangoda]

Hi @monkeyArms Sorry about the delay. This has been fixed in v0.13.2

[monkeyArms]

Works great. Thank you for the fix and the awesome library!