search

caseywebdev / react-list

:scroll: A versatile infinite scroll React component.
https://caseywebdev.github.io/react-list
MIT License
1.96k stars 176 forks source link

Unstable state in variable List because of offsetHeight 1px bug #169

Open DrGor opened 7 years ago

DrGor commented 7 years ago

First of all thanks for this great library. I came across the following defect: Browser: Chrome List type: variable Application freezes for a few seconds when scrolling. Console log message 'ReactList failed to reach a stable state.'

When updateVariableFrame is called and items are measured it calculates from and size based on item sizes. However all subsequent calls to updateVariableFrame (after componentDidUpdate) produce different size because of one item having a slightly different size (1px bigger/smaller offsetHeight) after each rendering phase compared to previous phase. This leads to infinite loop:

offsetHeight of item X = 300px => returns size = 4 in updateVariableFrame offsetHeight of item X = 301px => returns size = 5 in updateVariableFrame offsetHeight of item X = 300px => returns size = 4 in updateVariableFrame ...

Interestingly you have addressed this defect (slightly different offsetHeight) in getItemSizeAndItemsPerRow which is used for uniform lists only. Has anyone else experienced this 'freezing' defect with variable lists ?

Possible solution: Change the cached size only if it is significant (>1px). See cacheSizes method.

tacho87 commented 7 years ago

Same here

serranom commented 7 years ago

Also have seen this. Any work arounds?

DrGor commented 7 years ago

@serranom , you can override the method cacheSizes and update the size when it is significant (>1px). I am happy to create a PR if @caseywebdev is OK with this solution.

serranom commented 7 years ago

@DrGor, hmm. well in my case, the size is flipping back and forth from 25 to 445. I think I must have something else going on. Thanks though!