fix: spring does not start (#2372)

Co-authored-by: Daniel Neveux <[email protected]>

Author: dagatsoin

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

@@ -127,9 +127,12 @@ export function useSprings(
     []
   )
 
+  // 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
@@ -181,6 +184,10 @@ export function useSprings(
   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 @@ export function useSprings(
           ctrl.start(update)
         }
       }
-      updates.current[i] = null
     })
   })