1
1
import * as React from 'react'
2
- import { forwardRef , useRef , Ref , useCallback } from 'react'
2
+ import { forwardRef , useRef , Ref , useCallback , useEffect } from 'react'
3
3
import { useLayoutEffect } from 'react-layout-effect'
4
4
import {
5
5
is ,
@@ -44,7 +44,8 @@ export const withAnimated = (Component: any, host: HostConfig) => {
44
44
const [ props , deps ] = getAnimatedState ( givenProps , host )
45
45
46
46
const forceUpdate = useForceUpdate ( )
47
- const observer = new PropsObserver ( ( ) => {
47
+
48
+ const callback = ( ) => {
48
49
const instance = instanceRef . current
49
50
if ( hasInstance && ! instance ) {
50
51
// Either this component was unmounted before changes could be
@@ -60,7 +61,9 @@ export const withAnimated = (Component: any, host: HostConfig) => {
60
61
if ( didUpdate === false ) {
61
62
forceUpdate ( )
62
63
}
63
- } , deps )
64
+ }
65
+
66
+ const observer = new PropsObserver ( callback , deps )
64
67
65
68
const observerRef = useRef < PropsObserver > ( )
66
69
useLayoutEffect ( ( ) => {
@@ -77,6 +80,7 @@ export const withAnimated = (Component: any, host: HostConfig) => {
77
80
}
78
81
} )
79
82
83
+ useEffect ( callback , [ ] )
80
84
// Stop observing on unmount.
81
85
useOnce ( ( ) => ( ) => {
82
86
const observer = observerRef . current !
0 commit comments