Updating useTransform to subscribe on layout effect (#1617)

* Updating useTransform to subscribe on layout effect * Removing console log
motiondivision · Jul 14, 2022 · d8f0be2 · d8f0be2
1 parent 9824840
commit d8f0be2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [6.5.1] 2022-07-14
+
+### Fixed
+
+-   Adding `onChange` handlers in `useTransform` on `useLayoutEffect`.
+
 ## [6.5.0] 2022-07-13
 
 ### Added

diff --git a/packages/framer-motion/src/value/use-on-change.ts b/packages/framer-motion/src/value/use-on-change.ts
@@ -1,18 +1,18 @@
-import { useEffect } from "react"
+import { useIsomorphicLayoutEffect } from "../three-entry"
 import { MotionValue, Subscriber } from "./"
 import { isMotionValue } from "./utils/is-motion-value"
 
 export function useOnChange<T>(
     value: MotionValue<T> | number | string,
     callback: Subscriber<T>
 ) {
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (isMotionValue(value)) return value.onChange(callback)
     }, [callback])
 }
 
 export function useMultiOnChange(values: MotionValue[], handler: () => void) {
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         const subscriptions = values.map((value) => value.onChange(handler))
         return () => subscriptions.forEach((unsubscribe) => unsubscribe())
     })