Updating useTransform to subscribe on layout effect (framer#1617)

* Updating useTransform to subscribe on layout effect

* Removing console log

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

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