'Maximum update depth exceeded' issue

[themafia98]

Current behavior

component crashes with error

Expected behavior

the component does not crash

To Reproduce

pass the function key 'keyExtractor' ->

hook.js:608 The above error occurred in the <ForwardRef(FlashList)> component: at RecyclerViewComponent

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Most often occurs after a list has been opened on a page and then moved to another route and returned back (i.e. during the second rendering of the component)

Platform:

• Web
• iOS
• Android

Environment

2.0.0-rc.11

[naqvitalha]

Can you try v2.0.0-alpha.21 to see if it happens?

[themafia98]

@naqvitalha hmm.... It seems to have gotten better! But it would be good to test it some more

[divebuddycom]

I've been experiencing the same error "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops." as well. It happens for me whenever I resize the web browser window back and forth. I've tried setting the numColumns prop to 'undefined', but that doesn't work. I'm using FlashList v2.0.0-alpha.22.

My FlashList is responsive to the dimensions of the window. And when I drag the window wider and narrower, FlashList re-renders dozens of times, sometimes causing the error above pretty immediately... other times it takes more window size changes to generate the error.

[naqvitalha]

@divebuddycom Can you provide a repro or a screenshot of what your list looks like? We did get a similar issue reported before but we fixed it. I can look into it if there are some more details.

Also, try this go to node_modules/@shopify/flash-list/dist/recyclerview/layout-managers/LayoutManager.js and edit value on line 22. Set this.maxItemsToProcess = 25000; instead of it's current 250 value. Let me know if that resolves your problem.

[divebuddycom]

this.maxItemsToProcess = 25000; seems to have solved the problem for the most part. I dragged the window size around repeatedly attempting to make it break again, but it took several fast window changes (dragging the window size in and out very fast, making it wider and narrower repeatedly), in order to see the error again (something I doubt users are going to do). The one strange thing I did notice... is that once I'm able to break it and cause the error, it seems easier to recreate the error again by resizing the window (it doesn't take as many subsequent window changes, after the first error, to break it again).

My list is just rows of square thumbnail images (each image has a link to the main image page), no text, and the images resize as the screen size changes, in column count ranging from 2 to 5 images per row depending on the size of the window.

[naqvitalha]

@divebuddycom Can you try v2.0.2 and see if it breaks? Any new crash or visual glitches?

[naqvitalha]

This should be resolved now. If it's happening again feel free to comment or open a new issue.

[a-eid]

@naqvitalha still an issue on web on latest version 2.2.0 ..

[embryCODE]

Does anyone have a fix for this? Still a bug on 2.2.0.

[aditya-thummar-devx]

This is still broken in 2.3.1

[akash-dey]

Has anyone solved this? Still happens in 2.3.1

cc @naqvitalha