fix: use latest motion step handlers

src/hooks/useStatus.ts

@@ -146,11 +146,11 @@ export default function useStatus(
     }
   };
 
-  const eventHandlers = React.useMemo<{
+  const eventHandlers: {
     [STEP_PREPARE]?: MotionPrepareEventHandler;
     [STEP_START]?: MotionEventHandler;
     [STEP_ACTIVE]?: MotionEventHandler;
-  }>(() => getEventHandlers(currentStatus), [currentStatus]);
+  } = getEventHandlers(currentStatus);
 
   const [startStep, step] = useStepQueue(
     currentStatus,
@@ -318,8 +318,8 @@ export default function useStatus(
     motionAppear
       ? 'NONE'
       : // Enter or Leave check
-      step === STEP_START || step === STEP_ACTIVE
-      ? styleStep === step
-      : true,
+        step === STEP_START || step === STEP_ACTIVE
+        ? styleStep === step
+        : true,
   ];
 }

tests/CSSMotion.spec.tsx

@@ -161,6 +161,45 @@ describe('CSSMotion', () => {
       },
     );
 
+    it('uses the latest active handler during a motion', () => {
+      const firstActive = jest.fn(() => ({ opacity: 0.1 }));
+      const latestActive = jest.fn(() => ({ opacity: 0.9 }));
+      const Demo = ({
+        visible,
+        onEnterActive,
+      }: {
+        visible: boolean;
+        onEnterActive: CSSMotionProps['onEnterActive'];
+      }) => (
+        <CSSMotion
+          motionName="transition"
+          motionAppear={false}
+          visible={visible}
+          onEnterActive={onEnterActive}
+        >
+          {({ style, className }) => (
+            <div className={clsx('motion-box', className)} style={style} />
+          )}
+        </CSSMotion>
+      );
+
+      const { container, rerender } = render(
+        <Demo visible={false} onEnterActive={firstActive} />,
+      );
+      rerender(<Demo visible onEnterActive={firstActive} />);
+      rerender(<Demo visible onEnterActive={latestActive} />);
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(firstActive).not.toHaveBeenCalled();
+      expect(latestActive).toHaveBeenCalledTimes(1);
+      expect(container.querySelector('.motion-box')).toHaveStyle({
+        opacity: '0.9',
+      });
+    });
+
     it('leaveClassName should add to dom', () => {
       const genMotion = props => {
         const { visible, leavedClassName } = props;