Infinite loop of the 'componentDidUpdate' method (caused by an infinite state update).

[Gianarci]

Hi,

I've tried to render a list with a multiple items (of fixed size) per row, but it always prints 'ReactList failed to reach a stable state' in the console and slowdown the rendering. I've tried with both flex-box and inline-block, but no success. For e.g. the following fails:

.item {
    display: inline-block;
    width: 300px;
    height: 420px;
}

const itemsRenderer = (items: JSX.Element[], ref: string) => <div ref={ref as any}>{items}</div>;

const itemRenderer = (i: number) => <div key={`control_${i}`} className='item'>test</div>;

<ReactList itemRenderer={itemRenderer} itemsRenderer={itemsRenderer} length={500} type='uniform' />

Can anyone show me a correct and stable way to render a list with multiple items per row? Thanks in advance.

P.S.: If I change 'inline-block' to 'block' the message disappears.

[Gianarci]

Ok, looking at the source, the issue is the following:

the componentDidUpdate invokes the updateFrame. That method invokes maybeSetState that updates the component's state (if the state is changed). When the state of a component is updated, the componentDidUpdate is invoked again. You might think that in such new call of componentDidUpdate, the maybeSetState doesn't update the state anymore but debugging the maybeSetState, I've seen that the state is not updated and so the code changes it again leading to an infinite loop (this behavious is strange because in theory React should guarantee that the state is updated before invoking componentDidUpdate). I use React 18.2.0. This happens always when I scroll down the list and I reach the last element on the bottom.