Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/core/src/Controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand All @@ -460,6 +460,7 @@ export function getSprings<State extends Lookup>(
})
})
}
setSprings(ctrl, springs)
return springs
}

Expand All @@ -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) => {
Expand Down
19 changes: 9 additions & 10 deletions packages/core/src/hooks/useSprings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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])

Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -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
Expand All @@ -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)

Expand Down
7 changes: 2 additions & 5 deletions packages/core/src/hooks/useTransition.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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)

Expand Down