Skip to content

Tweak componentDidUpdate to support items animations #166

Open
@albertogasparin

Description

@albertogasparin

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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions