search

joshwcomeau / react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
http://joshwcomeau.github.io/react-flip-move/examples
MIT License
4.09k stars 258 forks source link

setState in cWRP can cause infinite update loop #229

Closed mattkrick closed 6 years ago

mattkrick commented 6 years ago

in React v16.4 i occasionally this this bug when adding a new item. any hints as to what's the cause? perhaps the setState should be debounced?

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.
    at invariant (invariant.js:42)
    at scheduleWork$1 (react-dom.development.js:16099)
    at Object.enqueueSetState (react-dom.development.js:11185)
    at FlipMove.Component.setState (react.development.js:273)
    at FlipMove.componentWillReceiveProps (react-flip-move.es.js:892)
    at callComponentWillReceiveProps (react-dom.development.js:11413)
    at updateClassInstance (react-dom.development.js:11605)
    at updateClassComponent (react-dom.development.js:13045)
    at beginWork (react-dom.development.js:13715)
    at performUnitOfWork (react-dom.development.js:15741)

Calling args:

          <FlipMove
            staggerDurationBy="30"
            duration={500}
            enterAnimation={'accordionVertical'}
            leaveAnimation={'accordionVertical'}
            typeName={null}
          >

child div is set to position relative.

joshwcomeau commented 6 years ago

Hm 🤔and if you replace <FlipMove> with a <div>, you don't see the same issue? What if you get rid of typeName?

I think setStates in cWRP are fine, the problematic ones are in cDU, since setState causes an update (but doesn't cause new props to be received). Looking through the source, the only potentially-unsafe setState calls happen when items are removed, or when the animation finishes; neither of those things should happen in an infinite loop. So this is confusing!

I'm sorry for how long it took for me to respond to this, and I imagine you've either found a workaround or moved onto a different solution, but if not, I'll try to find the time to look into this. I haven't tested FlipMove with React 16.4 yet - if anyone else has and encounters the same issue, please share!

joshwcomeau commented 6 years ago

Closing, since it sounds like an isolated issue, and one that I wasn't able to reproduce. Will happily re-open if more info can be provided.