diff --git a/conference.js b/conference.js
index a09bc5bc7..e30d0b562 100644
--- a/conference.js
+++ b/conference.js
@@ -1713,14 +1713,7 @@ export default {
                 return;
             }
 
-            const displayName = user.getDisplayName();
-
             logger.log(`USER ${id} connnected:`, user);
-            APP.API.notifyUserJoined(id, {
-                displayName,
-                formattedDisplayName: appendSuffix(
-                    displayName || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME)
-            });
             APP.UI.addUser(user);
 
             // check the roles for the new user and reflect them
@@ -1736,7 +1729,7 @@ export default {
             }
 
             logger.log(`USER ${id} LEFT:`, user);
-            APP.API.notifyUserLeft(id);
+
             APP.UI.onSharedVideoStop(id);
         });
 
diff --git a/react/features/display-name/functions.js b/react/features/display-name/functions.js
index 7ffb2d775..728033e20 100644
--- a/react/features/display-name/functions.js
+++ b/react/features/display-name/functions.js
@@ -7,7 +7,7 @@
  * @param {string} suffix - Suffix that will be appended.
  * @returns {string} The formatted display name.
  */
-export function appendSuffix(displayName: string, suffix: string) {
-    return `${displayName || suffix || ''}${
+export function appendSuffix(displayName: string, suffix: string = '') {
+    return `${displayName || suffix}${
         displayName && suffix && displayName !== suffix ? ` (${suffix})` : ''}`;
 }
diff --git a/react/features/external-api/middleware.js b/react/features/external-api/middleware.js
index 36a286817..2e433bd58 100644
--- a/react/features/external-api/middleware.js
+++ b/react/features/external-api/middleware.js
@@ -9,6 +9,8 @@ import { NOTIFY_CAMERA_ERROR, NOTIFY_MIC_ERROR } from '../base/devices';
 import { JitsiConferenceErrors } from '../base/lib-jitsi-meet';
 import {
     PARTICIPANT_KICKED,
+    PARTICIPANT_LEFT,
+    PARTICIPANT_JOINED,
     SET_LOADABLE_AVATAR_URL,
     getLocalParticipant,
     getParticipantById
@@ -129,6 +131,27 @@ MiddlewareRegistry.register(store => next => action => {
             { id: action.kicker });
         break;
 
+    case PARTICIPANT_LEFT:
+        APP.API.notifyUserLeft(action.participant.id);
+        break;
+
+    case PARTICIPANT_JOINED: {
+        const { participant } = action;
+        const { id, local, name } = participant;
+
+        // The version of external api outside of middleware did not emit
+        // the local participant being created.
+        if (!local) {
+            APP.API.notifyUserJoined(id, {
+                displayName: name,
+                formattedDisplayName: appendSuffix(
+                    name || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME)
+            });
+        }
+
+        break;
+    }
+
     case SET_FILMSTRIP_VISIBLE:
         APP.API.notifyFilmstripDisplayChanged(action.visible);
         break;