Maximum update depth exceeded on 8.0.0

[hilmia]

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.

[francolorenzocarestino]

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?

[francolorenzocarestino]

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

[francolorenzocarestino]

Can you create a stackblitz reproduction?

Yes, I try it

[jhubbardsf]

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)

[kenzaflow]

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

[cvpcasada]

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.

[mehmetakifakkus]

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.

[jhubbardsf]

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

[verheyenkoen]

Any release planned?

[jhubbardsf]

@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

[stefanofa]

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

[algoORgoal]

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