fix: spring does not start

packages/core/src/hooks/useSprings.test.tsx

@@ -26,6 +26,14 @@ describe('useSprings', () => {
   }, isStrictMode)
 
   describe('when only a props function is passed', () => {
+    it('should reach final value in strict mode', async () => {
+      update(1, () => ({
+        from: { x: 0 },
+        to: { x: 1 },
+      }))
+      expect(mapSprings(s => s.goal)).toEqual([{ x: 1 }])
+    })
+
     it('calls the props function once per new spring', () => {
       const getProps = jest.fn((i: number) => ({ x: i * 100 }))
 

packages/core/src/hooks/useSprings.ts

@@ -82,7 +82,7 @@
   // Create a local ref if a props function or deps array is ever passed.
   const ref = useMemo(
     () => (propsFn || arguments.length == 3 ? SpringRef() : void 0),
     []
   )
 
   interface State {
@@ -124,12 +124,15 @@
             })
       },
     }),
     []
   )
 
+  // useRef is needed to get the same references accross renders.
+  // Note that controllers are a shallow copy of the final array.
+  // So any array manipulation won't impact the final array until
+  // the commit phase, in the useIsomorphicLayoutEffect callback
   const ctrls = useRef([...state.ctrls])
   const updates = useRef<any[]>([])
-  updates.current ??= []
 
   // Cache old controllers to dispose in the commit phase.
   const prevLength = usePrev(length) || 0
@@ -145,13 +148,13 @@
     ctrls.current.length = length
 
     declareUpdates(prevLength, length)
   }, [length])
 
   // Update existing controllers when "deps" are changed.
   useMemo(() => {
     declareUpdates(0, Math.min(prevLength, length))
     // @ts-expect-error – we want to allow passing undefined to useMemo
   }, deps)
 
   /** Fill the `updates` array with declarative updates for the given index range. */
   function declareUpdates(startIndex: number, endIndex: number) {
@@ -181,6 +184,10 @@
   const prevContext = usePrev(context)
   const hasContext = context !== prevContext && hasProps(context)
 
+  // This is the commit phase where the new transition will begin.
+  // - updated animation values will be passed to the controlers.
+  // - state will be updated
+  // - springs will start or the new update will be queued if the spring is not started yet.
   useIsomorphicLayoutEffect(() => {
     layoutId.current++
 
@@ -218,7 +225,6 @@
           ctrl.start(update)
         }
       }
-      updates.current[i] = null
     })
   })