fix: springs sometimes return undefined (pmndrs#1509)

* refactor: use a ref to capture the Controllers

* fix: set the Springs when they're created

useLayoutEffect isnt called when state is set in the hook

Author: joshuaellis

packages/core/src/Controller.ts

@@ -442,7 +442,7 @@ export async function flushUpdate(
  * until they're given to `setSprings`.
  */
 export function getSprings<State extends Lookup>(
-  ctrl: Controller<State>,
+  ctrl: Controller<Lookup<any>>,
   props?: OneOrMore<ControllerUpdate<State>>
 ) {
   const springs = { ...ctrl.springs }
@@ -460,6 +460,7 @@ export function getSprings<State extends Lookup>(
       })
     })
   }
+  setSprings(ctrl, springs)
   return springs
 }
 
@@ -468,7 +469,7 @@ export function getSprings<State extends Lookup>(
  * whose key is not already in use.
  */
 export function setSprings(
-  ctrl: Controller,
+  ctrl: Controller<Lookup<any>>,
   springs: SpringValues<UnknownProps>
 ) {
   eachProp(springs, (spring, key) => {

packages/core/src/hooks/useSprings.ts

@@ -122,17 +122,17 @@ export function useSprings(
     []
   )
 
-  const ctrls = [...state.ctrls]
+  const ctrls = useRef([...state.ctrls])
   const updates: any[] = []
 
   // Cache old controllers to dispose in the commit phase.
   const prevLength = usePrev(length) || 0
-  const oldCtrls = ctrls.slice(length, prevLength)
+  const oldCtrls = ctrls.current.slice(length, prevLength)
 
   // Create new controllers when "length" increases, and destroy
   // the affected controllers when "length" decreases.
   useMemo(() => {
-    ctrls.length = length
+    ctrls.current.length = length
     declareUpdates(prevLength, length)
   }, [length])
 
@@ -144,7 +144,9 @@ export function useSprings(
   /** Fill the `updates` array with declarative updates for the given index range. */
   function declareUpdates(startIndex: number, endIndex: number) {
     for (let i = startIndex; i < endIndex; i++) {
-      const ctrl = ctrls[i] || (ctrls[i] = new Controller(null, state.flush))
+      const ctrl =
+        ctrls.current[i] ||
+        (ctrls.current[i] = new Controller(null, state.flush))
 
       const update: UseSpringProps<any> = propsFn
         ? propsFn(i, ctrl)
@@ -159,7 +161,7 @@ export function useSprings(
   // New springs are created during render so users can pass them to
   // their animated components, but new springs aren't cached until the
   // commit phase (see the `useLayoutEffect` callback below).
-  const springs = ctrls.map((ctrl, i) => getSprings(ctrl, updates[i]))
+  const springs = ctrls.current.map((ctrl, i) => getSprings(ctrl, updates[i]))
 
   const context = useContext(SpringContext)
   const prevContext = usePrev(context)
@@ -169,7 +171,7 @@ export function useSprings(
     layoutId.current++
 
     // Replace the cached controllers.
-    state.ctrls = ctrls
+    state.ctrls = ctrls.current
 
     // Flush the commit queue.
     const { queue } = state
@@ -185,10 +187,7 @@ export function useSprings(
     })
 
     // Update existing controllers.
-    each(ctrls, (ctrl, i) => {
-      const values = springs[i]
-      setSprings(ctrl, values)
-
+    each(ctrls.current, (ctrl, i) => {
       // Attach the controller to the local ref.
       ref?.add(ctrl)
 

packages/core/src/hooks/useTransition.tsx

@@ -30,7 +30,7 @@ import {
   inferTo,
   replaceRef,
 } from '../helpers'
-import { Controller, getSprings, setSprings } from '../Controller'
+import { Controller, getSprings } from '../Controller'
 import { SpringContext } from '../SpringContext'
 import { SpringRef } from '../SpringRef'
 import { TransitionPhase } from '../TransitionPhase'
@@ -321,13 +321,10 @@ export function useTransition(
 
   useLayoutEffect(
     () => {
-      each(changes, ({ phase, springs, payload }, t) => {
+      each(changes, ({ phase, payload }, t) => {
         const { ctrl } = t
         t.phase = phase
 
-        // Save any springs created this render.
-        setSprings(ctrl, springs)
-
         // Attach the controller to our local ref.
         ref?.add(ctrl)