Maximum update depth exceeded on 8.0.0

[HT]

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

[Justin Schroeder]

Will need a reproduction to proceed with any debugging.

[Franco Lorenzo]

The same problem with useAutoAnimate on:
"react": "18.2.0",
"next": "13.4.19",
"@formkit/auto-animate": "^0.8.0",

[Justin Schroeder]

Can you create a stackblitz reproduction?

[Franco Lorenzo]

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()

[Franco Lorenzo]

Can you create a stackblitz reproduction?

Yes, I try it

[Josh Hubbard]

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)

[Kevin Zaracho]

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()

The same here, fixed by removing params

[Cyrus Venn Casada]

Memoizing the optional configuration (or making the object reference constant) seems to fix the issue on my end.

[Justin Schroeder]

If anyone wants to submit a PR to fix this I’d happily merge/publish it. Otherwise, this will be at the mercy of whenever I get the time to do another sprint on AutoAnimate — probably a few weeks aways.

[Mehmet Akif AKKUŞ]

Making version of the auto-animate down to 0.7.0 resolves the problem on my end. I also do not use the params fed to constructor.

[Josh Hubbard]

Memoizing the optional configuration (or making the object reference constant) seems to fix the issue on my end.

If anyone needed an example of how to memoize an optional configuration and see it working:
https://stackblitz.com/edit/stackblitz-starters-nkqz3q?file=pages%2Findex.js

[Koen Verheyen]

Any release planned?

[Josh Hubbard]

@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#master

I 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.

[Justin Schroeder]

This fix is now published in 0.8.1

[Stefano Faieta]

I am not completely sure that the merged fix represents the intended behaviour.

With the new change, it will no longer be possible to systematically update the options used by autoAnimate, and only the options set when the component was mounted using useAutoAnimate will always be used.

Maybe these are niche cases, but it becomes impossible¹ to change the easing or the duration systematically.

Footnotes

1. or very complicated and counterintuitive as one would have to remount the component using useAutoAnimate by manually changing the key ↩

[melonges]

This problem remains

    "next": "13.5.4",
    "react": "18.2.0",
    "@formkit/auto-animate": "^0.8.1",

[HaynesX]

Not working for me on Next.js with 0.8.2 still, using NextUI\s Listbox.

[strblr]

Same problem here. Using React 18.3.1

[Chan]

Same problem here, using Next.js 14.2.3
@justin-schroeder