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

Change MAX_SYNC_UPDATES to 50 #223

Closed sakalauskas closed 5 years ago

sakalauskas commented 5 years ago

In React v16, NESTED_UPDATE_LIMIT is now 50, so the unstable list is not being caught.

caseywebdev commented 5 years ago

Relevant: https://github.com/facebook/react/pull/13163

Thanks for the fix!

LoicEvenium commented 5 years ago

In some case, the limit of 50 was not low enough and the React error "Invariant Violation: 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." could appear.

Seen on iOS Cordova app using WKWebView, when app relaunched after being killed. The updateCounter variable set to 48 before React throw the error. No reproductible on Chrome or Safari Mac.

Did anyone had the same issue ?

...
[Log] componentDidUpdate – 45 (cordova.js, line 1731)
[Log] componentDidUpdate – 46 (cordova.js, line 1731)
[Log] componentDidUpdate – 47 (cordova.js, line 1731)
[Log] componentDidUpdate – 48 (cordova.js, line 1731)
[Error] Invariant Violation: 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.
    invariant (react-dom.development.js:55)
    scheduleWork (react-dom.development.js:19870)
    enqueueSetState (react-dom.development.js:11144)
    setState (react.development.js:335)
    maybeSetState (react-list.js:212)
    updateVariableFrame (react-list.js:444)
    componentDidUpdate (react-list.js:205)
acusti commented 4 years ago

@LoicEvenium We ran into this issue also in our web app in Chrome on Mac using react-list and had to fork the repo to lower MAX_SYNC_UPDATES to 40 in order to reliably prevent the error.