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?
I was trying to figure out why ReactList starts rendering the list using the
pageSizesetting, but then it re-renders the list againnamount of times to "stabilise", increasing thesizeuntil it eventually implodes (this is also what happens with elements animating fromheight:0, see it here: https://jsfiddle.net/4cqqfmqd/)This is the current implementation:
Is there any particular reason why ReactList should run
updateFrameeven if it has just been called?Why not checking if
updateFramewas just called (by checking ifstatehas just been changed) and if it is so, do nothing?In my tests this prevents the infinite loop and also solves the issue with the above jsfiddle. What do you think?