diff --git a/.changeset/gentle-students-wonder.md b/.changeset/gentle-students-wonder.md new file mode 100644 index 0000000000..33b131181f --- /dev/null +++ b/.changeset/gentle-students-wonder.md @@ -0,0 +1,16 @@ +--- +'@react-spring/core': patch +'@react-spring/animated': patch +'@react-spring/parallax': patch +'@react-spring/rafz': patch +'react-spring': patch +'@react-spring/shared': patch +'@react-spring/types': patch +'@react-spring/konva': patch +'@react-spring/native': patch +'@react-spring/three': patch +'@react-spring/web': patch +'@react-spring/zdog': patch +--- + +fix: react18 useTransition on mount diff --git a/packages/core/src/hooks/useTransition.tsx b/packages/core/src/hooks/useTransition.tsx index 9d12378f82..8f6cffb9c0 100644 --- a/packages/core/src/hooks/useTransition.tsx +++ b/packages/core/src/hooks/useTransition.tsx @@ -104,19 +104,15 @@ export function useTransition( useOnce(() => { /** - * This _should_ only run in `StrictMode` where everything - * is destroyed and remounted, because the enter animation - * was most likely cancelled we run it again on initial mount. + * If transitions exist on mount of the component + * then reattach their refs on-mount, this was required + * for react18 strict mode to work properly. * - * This does nothing when `StrictMode` isn't enabled, - * because usedTransitions on mount is typically null. + * See https://github.com/pmndrs/react-spring/issues/1890 */ - each(usedTransitions.current!, t => { - t.ctrl.ref?.add(t.ctrl) - const change = changes.get(t) - if (change) { - t.ctrl.start(change.payload) - } + each(transitions, t => { + ref?.add(t.ctrl) + t.ctrl.ref = ref }) // Destroy all transitions on dismount. @@ -159,6 +155,7 @@ export function useTransition( if (~i) transitions[i] = t } }) + // Mount new items with fresh transitions. each(items, (item, i) => { if (!transitions[i]) {