diff --git a/packages/agora-rtc-react/src/hooks/useJoin.ts b/packages/agora-rtc-react/src/hooks/useJoin.ts
index 46bc52ca..9464a7fc 100644
--- a/packages/agora-rtc-react/src/hooks/useJoin.ts
+++ b/packages/agora-rtc-react/src/hooks/useJoin.ts
@@ -1,8 +1,10 @@
 import type { IAgoraRTCClient, IAgoraRTCError, UID } from "agora-rtc-sdk-ng";
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import { AgoraRTCReactError } from "../error";
 import { useRTCClient } from "../hooks/useRTCClient";
+import type { AsyncTaskRunner } from "../misc/utils";
+import { createAsyncTaskRunner, joinDisposers } from "../misc/utils";
 import type { FetchArgs } from "../types";
 
 import { useAsyncEffect, useIsUnmounted } from "./tools";
@@ -47,6 +49,7 @@ export function useJoin(
 ): { data: UID; isLoading: boolean; isConnected: boolean; error: AgoraRTCReactError | null } {
   const resolvedClient = useRTCClient(client);
   const isConnected = useIsConnected(client);
+  const runnerRef = useRef<AsyncTaskRunner | undefined>();
 
   const [isLoading, setIsLoading] = useState(false);
   const [joinResult, setJoinResult] = useState<UID>(0);
@@ -80,15 +83,26 @@ export function useJoin(
       if (!isUnmountRef.current) {
         setIsLoading(false);
       }
-      return () => {
-        for (const track of resolvedClient.localTracks) {
-          if (track.isPlaying) {
-            track.stop();
+
+      const runner = (runnerRef.current ||= createAsyncTaskRunner());
+
+      return joinDisposers([
+        () => {
+          runner.dispose();
+        },
+        () => {
+          runner.run(() => resolvedClient.unpublish(resolvedClient.localTracks));
+        },
+        () => {
+          for (const track of resolvedClient.localTracks) {
+            if (track.isPlaying) {
+              track.stop();
+            }
+            track.close();
           }
-          track.close();
-        }
-        return resolvedClient.leave();
-      };
+          runner.run(() => resolvedClient.leave());
+        },
+      ]);
     }
   }, [ready, client]);
   return {
diff --git a/packages/agora-rtc-react/src/hooks/usePublish.ts b/packages/agora-rtc-react/src/hooks/usePublish.ts
index 3c35e6e9..779c38de 100644
--- a/packages/agora-rtc-react/src/hooks/usePublish.ts
+++ b/packages/agora-rtc-react/src/hooks/usePublish.ts
@@ -80,6 +80,11 @@ export function usePublish(
       const track = filterTracks[i];
       if (track) {
         if (canPublish(track)) {
+          await resolvedClient.unpublish(
+            pubTracks.current.filter(
+              pubTrack => pubTrack?.trackMediaType === track.trackMediaType,
+            ) as ILocalTrack[],
+          );
           try {
             if (!isUnmountRef.current) {
               setIsLoading(true);
diff --git a/packages/agora-rtc-react/src/hooks/useRemoteAudioTracks.ts b/packages/agora-rtc-react/src/hooks/useRemoteAudioTracks.ts
index 3a6bf5d2..68ba5ed4 100644
--- a/packages/agora-rtc-react/src/hooks/useRemoteAudioTracks.ts
+++ b/packages/agora-rtc-react/src/hooks/useRemoteAudioTracks.ts
@@ -130,9 +130,9 @@ export function useRemoteAudioTracks(
             user,
             mediaType: "audio",
           });
-          nextTracks.current.splice(i, 1);
-          i--;
         }
+        nextTracks.current.splice(i, 1);
+        i--;
       }
     }
     if (unsubscribeList.length > 0) {
diff --git a/packages/agora-rtc-react/src/hooks/useRemoteVideoTracks.ts b/packages/agora-rtc-react/src/hooks/useRemoteVideoTracks.ts
index b1a5623e..ef482406 100644
--- a/packages/agora-rtc-react/src/hooks/useRemoteVideoTracks.ts
+++ b/packages/agora-rtc-react/src/hooks/useRemoteVideoTracks.ts
@@ -128,9 +128,9 @@ export function useRemoteVideoTracks(
             user,
             mediaType: "video",
           });
-          nextTracks.current.splice(i, 1);
-          i--;
         }
+        nextTracks.current.splice(i, 1);
+        i--;
       }
     }
     if (unsubscribeList.length > 0) {