[STREAM-987] Memoize conversations so they don't change on every render (#952)

Author: hjon

changelog.md

@@ -4,6 +4,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 # [Unreleased](https://github.com/MyPureCloud/genesys-cloud-webrtc-sdk/compare/v11.3.2...HEAD)
+### Fixed
+* [STREAM-987](https://inindca.atlassian.net/browse/STREAM-987) - Demo app: Memoize conversations so they don't change every render when nothing has changed
 
 # [v11.3.2](https://github.com/MyPureCloud/genesys-cloud-webrtc-sdk/compare/v11.3.1...v11.3.2)
 ### Changed

react-demo-app/src/components/ActiveConversationsTable.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import useSdk from '../hooks/useSdk';
 import './ActiveConversationsTable.css';
 import { GuxButton, GuxTable, GuxRadialLoading } from 'genesys-spark-components-react';
@@ -12,7 +12,7 @@ export default function ActiveConversationsTable() {
   const conversationsObj = useSelector(
     (state: RootState) => state.conversations.activeConversations
   );
-  const conversations = Object.values(conversationsObj);
+  const conversations = useMemo(() => Object.values(conversationsObj), [conversationsObj]);
   const { endSession, toggleAudioMute, toggleHoldState } = useSdk();
   const [holdLabels, setHoldLabels ] = useState<Array<string | JSX.Element>>([]);
   const [muteLabels, setMuteLabels ] = useState<Array<string | JSX.Element>>([]);