Refactor

src/react/hooks/useAnimation.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import {
   assign,
   getStyle,
@@ -24,6 +24,7 @@ import {
 } from "../../core/waapi";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 import { useStatic } from "./useStatic";
+import { useLatestRef } from "./useLatestRef";
 
 export type PlayOptionsWithArgs<Args = void> = PlayOptions & { args: Args };
 
@@ -163,8 +164,8 @@ export const useAnimation = <Args = void>(
   keyframe: TypedKeyframe | TypedKeyframe[] | GetKeyframeFunction<Args>,
   options?: AnimationOptions
 ): AnimationHandle<Args> => {
-  const keyframeRef = useRef(keyframe);
-  const optionsRef = useRef(options);
+  const keyframeRef = useLatestRef(keyframe);
+  const optionsRef = useLatestRef(options);
 
   const [handle, s] = useStatic((): [AnimationHandle<Args>, AnimationState] => {
     let target: Element | null = null;
@@ -233,8 +234,6 @@ export const useAnimation = <Args = void>(
   });
 
   useIsomorphicLayoutEffect(() => {
-    keyframeRef.current = keyframe;
-    optionsRef.current = options;
     if (
       options?.autoPlay &&
       // Keyframe function may have arguments, so don't handle it for now.

src/react/hooks/useAnimationFunction.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import { isSameObject } from "../../core/utils";
 import {
   TypedKeyframeEffectOptions,
@@ -14,8 +14,8 @@ import {
   WaitingAnimationEventName,
 } from "../../core/waapi";
 import type { BaseAnimationHandle } from "./useAnimation";
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 import { useStatic } from "./useStatic";
+import { useLatestRef } from "./useLatestRef";
 
 /**
  * Handle of {@link useAnimationFunction}.
@@ -70,8 +70,8 @@ export const useAnimationFunction = <Args = void>(
   onUpdate: AnimationFunction<Args>,
   options?: AnimationFunctionOptions
 ): AnimationFunctionHandle<Args> => {
-  const onUpdateRef = useRef(onUpdate);
-  const optionsRef = useRef(options);
+  const onUpdateRef = useLatestRef(onUpdate);
+  const optionsRef = useLatestRef(options);
 
   const [handle, cleanup] = useStatic(
     (): [AnimationFunctionHandle<Args>, () => void] => {
@@ -134,11 +134,6 @@ export const useAnimationFunction = <Args = void>(
     }
   );
 
-  useIsomorphicLayoutEffect(() => {
-    onUpdateRef.current = onUpdate;
-    optionsRef.current = options;
-  });
-
   useEffect(() => cleanup, []);
 
   return handle;

src/react/hooks/useLatestRef.ts

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+
+export const useLatestRef = <T>(value: T) => {
+  const ref = useRef<T>(value);
+
+  useIsomorphicLayoutEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref;
+};

src/react/hooks/useTransitionAnimation.ts

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef } from "react";
+import { useContext, useEffect } from "react";
 import {
   EXITED,
   EXITING,
@@ -16,6 +16,7 @@ import type {
   TypedKeyframe,
 } from "../../core";
 import { useStatic } from "./useStatic";
+import { useLatestRef } from "./useLatestRef";
 
 export interface TransitionAnimationHandle {
   (ref: Element | null): void;
@@ -47,7 +48,7 @@ export const useTransitionAnimation = (keyframes: {
     return acc;
   }, {} as { [key in TransitionState]: AnimationHandle | undefined });
 
-  const animationsRef = useRef(animations);
+  const animationsRef = useLatestRef(animations);
 
   const [animation, cleanup] = useStatic(
     (): [TransitionAnimationHandle, () => void] => {
@@ -75,10 +76,6 @@ export const useTransitionAnimation = (keyframes: {
     }
   );
 
-  useIsomorphicLayoutEffect(() => {
-    animationsRef.current = animations;
-  });
-
   useEffect(() => cleanup, []);
 
   const currentState = useContext(TransitionStateContext);