Repository navigation
Infinite loop of the 'componentDidUpdate' method (caused by an infinite state update). #250
Description
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.
Activity
[-]Multiple elements per row ('uniform' type), doesn't works.[/-][+]Multiple elements per row ('uniform' type), doesn't work.[/+]Gianarci commentedon Oct 3, 2022
Ok, looking at the source, the issue is the following:
the
componentDidUpdateinvokes theupdateFrame. That method invokesmaybeSetStatethat updates the component's state (if the state is changed). When the state of a component is updated, thecomponentDidUpdateis invoked again. You might think that in such new call ofcomponentDidUpdate, themaybeSetStatedoesn't update the state anymore but debugging themaybeSetState, 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 invokingcomponentDidUpdate). I use React 18.2.0. This happens always when I scroll down the list and I reach the last element on the bottom.[-]Multiple elements per row ('uniform' type), doesn't work.[/-][+]Infinite loop of the 'componentDidUpdate' method (caused by an infinite state update).[/+]