auto-animate: Maximum update depth exceeded on 8.0.0
Getting the following error in V8.0.0
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.
Running on NextJS
About this issue
- Original URL
- State: closed
- Created 9 months ago
- Reactions: 1
- Comments: 16 (8 by maintainers)
Commits related to this issue
- fix(#166): Maximum update depth exceeded on 8.0.0 — committed to IvarssonAndreas/auto-animate by IvarssonAndreas 9 months ago
- fix: memoize options in react (#166) Fix Max update depth exceeded with useAutoAnimate — committed to formkit/auto-animate by justin-schroeder 8 months ago
Memoizing the optional configuration (or making the object reference constant) seems to fix the issue on my end.
Just wanted to mention I’m getting this too when trying to add an optional plugin. Doesn’t occur when using plain
useAutoAnimate().react: 18.2.0 next: 12.2.0 autoAnimate: ^0.8.0
Edit: @justin-schroeder Updated with stackblitz showing the error. (link)
This fix is now published in 0.8.1
@verheyenkoen You might already know this, but figured I’d post this in case someone else needed this bug fix before their next release. You can choose to install the library from the master branch of this repository instead of a release version. Run the following command. It will install build and install @formkit/auto-animate from the specified branch. If you already have @formkit/auto-animate in your package.json that’s fine, it’ll update it to point to this master branch.
npm i formkit/auto-animate#masterI believe this should work with yarn and pnpm as well.
Note: Notice I didn’t type
npm i @formkit/auto-animate#aster, there’s no @ namespace before formkit. This is because npm will search for the formkit/auto-animate repository, not the @formkit npmjs namespace.I think it has to do with the optional configuration. this gives me error:
const [parent] = useAutoAnimate({ duration: 150 })and not this:const [parent] = useAutoAnimate()