Fix whole composite rerender

change/@internal-react-composites-845d9c04-0be2-48ce-a944-c30ffefd00b0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix whole app re-render when callId changes",
+  "packageName": "@internal/react-composites",
+  "email": "jiangnanhello@live.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.ts

@@ -90,7 +90,8 @@ class CallContext {
     this.setState({ ...this.state, isLocalPreviewMicrophoneEnabled });
   }
 
-  public setCallId(callId: string | undefined): void {
+  // This is the key to find current call object in client state
+  public setCurrentCallId(callId: string | undefined): void {
     this.callId = callId;
   }
 
@@ -170,6 +171,15 @@ export class AzureCommunicationCallAdapter implements CallAdapter {
         callClient.offStateChange(onStateChange);
         return;
       }
+
+      // `updateClientState` searches for the current call from all the calls in the state using a cached `call.id`
+      // from the call object. `call.id` can change during a call. We must update the cached `call.id` before
+      // calling `updateClientState` so that we find the correct state object for the call even when `call.id`
+      // has changed.
+      // https://github.com/Azure/communication-ui-library/pull/1820
+      if (this.call?.id) {
+        this.context.setCurrentCallId(this.call.id);
+      }
       this.context.updateClientState(clientState);
     };
 
@@ -293,7 +303,7 @@ export class AzureCommunicationCallAdapter implements CallAdapter {
     this.unsubscribeCallEvents();
     this.call = undefined;
     this.handlers = createDefaultCallingHandlers(this.callClient, this.callAgent, this.deviceManager, undefined);
-    this.context.setCallId(undefined);
+    this.context.setCurrentCallId(undefined);
     // Resync state after callId is set
     this.context.updateClientState(this.callClient.getState());
     this.stopCamera();
@@ -393,7 +403,7 @@ export class AzureCommunicationCallAdapter implements CallAdapter {
 
   private processNewCall(call: Call): void {
     this.call = call;
-    this.context.setCallId(call.id);
+    this.context.setCurrentCallId(call.id);
 
     // Resync state after callId is set
     this.context.updateClientState(this.callClient.getState());
@@ -491,9 +501,6 @@ export class AzureCommunicationCallAdapter implements CallAdapter {
   }
 
   private callIdChanged(): void {
-    this.context.setCallId(this.call?.id);
-    // Resync state after callId is set
-    this.context.updateClientState(this.callClient.getState());
     this.emitter.emit('callIdChanged', { callId: this.callIdChanged.bind(this) });
   }