Open
Description
I was trying to figure out why ReactList starts rendering the list using the pageSize
setting, but then it re-renders the list again n
amount of times to "stabilise", increasing the size
until it eventually implodes (this is also what happens with elements animating from height:0
, see it here: https://jsfiddle.net/4cqqfmqd/)
This is the current implementation:
componentDidUpdate() {
// If the list has reached an unstable state, prevent an infinite loop.
if (this.unstable) return;
if (++this.updateCounter > MAX_SYNC_UPDATES) {
this.unstable = true;
return console.error(UNSTABLE_MESSAGE);
}
if (!this.updateCounterTimeoutId) {
this.updateCounterTimeoutId = setTimeout(() => {
this.updateCounter = 0;
delete this.updateCounterTimeoutId;
}, 0);
}
this.updateFrame();
}
Is there any particular reason why ReactList should run updateFrame
even if it has just been called?
Why not checking if updateFrame
was just called (by checking if state
has just been changed) and if it is so, do nothing?
componentDidUpdate(prevProps, prevState) {
// props have changed? (check the state as we know it is immutable, props might not)
if (prevState === this.state) {
this.updateFrame();
}
}
In my tests this prevents the infinite loop and also solves the issue with the above jsfiddle. What do you think?
Metadata
Metadata
Assignees
Labels
No labels