fix: memoize options in react (#166)

Fix Max update depth exceeded with useAutoAnimate
formkit · Nov 3, 2023 · 8318a37 · 8318a37 · vercel · Nov 3, 2023
2 parents 8e4626a + 3cd8cae
commit 8318a37
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/react/index.ts b/src/react/index.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, RefCallback } from "react"
+import { useState, useCallback, RefCallback, useMemo } from "react"
 import autoAnimate, {
   AutoAnimateOptions,
   AutoAnimationPlugin,
@@ -16,15 +16,16 @@ export function useAutoAnimate<T extends Element>(
   const [controller, setController] = useState<
     AnimationController | undefined
   >()
+  const memoizedOptions = useMemo(() => options, [])
   const element = useCallback(
     (node: T) => {
       if (node instanceof HTMLElement) {
-        setController(autoAnimate(node, options))
+        setController(autoAnimate(node, memoizedOptions))
       } else {
         setController(undefined)
       }
     },
-    [options]
+    [memoizedOptions]
   )
   const setEnabled = useCallback(
     (enabled: boolean) => {