fix(appear): use copy of ref for valid ref value in useEffect cleanups

packages/appear/src/typings.ts

@@ -3,13 +3,13 @@ import type * as React from 'react';
 export interface AppearProps {
   children: React.ReactElement;
   /**
-   * 元素进入可视区域触发的事件
+   * Triggered when the element enters the visible area.
    * @param {CustomEvent} e
    * @returns {void}
    */
   onAppear?: (e: CustomEvent) => void;
   /**
-   * 元素离开可视区域触发的事件
+   * Triggered when the element leaves the visible area.
    * @param {CustomEvent} e
    * @returns {void}
    */

packages/appear/src/weex/index.tsx

@@ -1,30 +1,30 @@
+import type { ForwardedRef } from 'react';
 import { useEffect, useRef, forwardRef, cloneElement, Children } from 'react';
 import type { AppearProps } from '../typings';
 
 const WeexAppear = forwardRef<any, AppearProps>((props, ref) => {
-  const childrenRef = ref || useRef<HTMLDivElement>(null);
+  const childrenRef: ForwardedRef<HTMLDivElement> = ref ?? useRef<HTMLDivElement>(null);
   const { children, onAppear, onDisappear } = props;
 
   useEffect(() => {
-    onAppear &&
-      typeof childrenRef === 'object' &&
-      childrenRef.current?.addEventListener('appear', (e: CustomEvent) => onAppear(e));
+    // Use copy of childrenRef to avoid ref value changed in cleanup phase.
+    const nodeRef = typeof childrenRef === 'object' ? childrenRef.current : null;
+
+    // Return early if onAppear callback not specified.
+    onAppear && nodeRef?.addEventListener('appear', (e: CustomEvent) => onAppear(e));
+
     return () => {
-      onAppear &&
-        typeof childrenRef === 'object' &&
-        childrenRef.current?.removeEventListener('appear', (e: CustomEvent) => onAppear(e));
+      onAppear && nodeRef?.removeEventListener('appear', (e: CustomEvent) => onAppear(e));
     };
   }, []);
 
   useEffect(() => {
-    onDisappear &&
-      typeof childrenRef === 'object' &&
-      childrenRef.current?.addEventListener('disappear', (e: CustomEvent) => onDisappear(e));
+    const nodeRef = typeof childrenRef === 'object' ? childrenRef.current : null;
+
+    onDisappear && nodeRef?.addEventListener('disappear', (e: CustomEvent) => onDisappear(e));
 
     return () => {
-      onDisappear &&
-        typeof childrenRef === 'object' &&
-        childrenRef.current?.removeEventListener('disappear', (e: CustomEvent) => onDisappear(e));
+      onDisappear && nodeRef?.removeEventListener('disappear', (e: CustomEvent) => onDisappear(e));
     };
   }, []);