diff --git a/packages/trace-viewer/src/ui/callTab.tsx b/packages/trace-viewer/src/ui/callTab.tsx
index cfa3be4880..fcbf9b6307 100644
--- a/packages/trace-viewer/src/ui/callTab.tsx
+++ b/packages/trace-viewer/src/ui/callTab.tsx
@@ -31,12 +31,11 @@ export const CallTab: React.FunctionComponent<{
   executionStartWallTime: number,
   sdkLanguage: Language | undefined,
 }> = ({ action, executionStartTime, executionStartWallTime, sdkLanguage }) => {
+  // We never need the waitForEventInfo (`info`).
+  const paramKeys = React.useMemo(() => Object.keys(action?.params ?? {}).filter(name => name !== 'info'), [action]);
+
   if (!action)
     return <PlaceholderPanel text='No action selected' />;
-  const params = { ...action.params };
-  // Strip down the waitForEventInfo data, we never need it.
-  delete params.info;
-  const paramKeys = Object.keys(params);
 
   const startTimeMillis = action.startTime - executionStartTime;
   const startTime = msToString(startTimeMillis);
@@ -46,25 +45,33 @@ export const CallTab: React.FunctionComponent<{
 
   const duration = action.endTime ? msToString(action.endTime - action.startTime) : 'Timed Out';
 
-  return <div className='call-tab'>
-    <div className='call-line'>{action.apiName}</div>
-    {<>
-      <div className='call-section'>Time</div>
-      {wallTime && <DateTimeCallLine name='wall time:' value={wallTime}/>}
-      <DateTimeCallLine name='start:' value={startTime}/>
-      <DateTimeCallLine name='duration:' value={duration}/>
-    </>}
-    { !!paramKeys.length && <div className='call-section'>Parameters</div> }
-    {
-      !!paramKeys.length && paramKeys.map((name, index) => renderProperty(propertyToString(action, name, params[name], sdkLanguage), 'param-' + index))
-    }
-    { !!action.result && <div className='call-section'>Return value</div> }
-    {
-      !!action.result && Object.keys(action.result).map((name, index) =>
-        renderProperty(propertyToString(action, name, action.result[name], sdkLanguage), 'result-' + index)
-      )
-    }
-  </div>;
+  return (
+    <div className='call-tab'>
+      <div className='call-line'>{action.apiName}</div>
+      {
+        <>
+          <div className='call-section'>Time</div>
+          {wallTime && <DateTimeCallLine name='wall time:' value={wallTime}/>}
+          <DateTimeCallLine name='start:' value={startTime}/>
+          <DateTimeCallLine name='duration:' value={duration}/>
+        </>
+      }
+      {
+        !!paramKeys.length && <>
+          <div className='call-section'>Parameters</div>
+          {paramKeys.map(name => renderProperty(propertyToString(action, name, action.params[name], sdkLanguage)))}
+        </>
+      }
+      {
+        !!action.result && <>
+          <div className='call-section'>Return value</div>
+          {Object.keys(action.result).map(name =>
+            renderProperty(propertyToString(action, name, action.result[name], sdkLanguage))
+          )}
+        </>
+      }
+    </div>
+  );
 };
 
 const DateTimeCallLine: React.FC<{ name: string, value: string }> = ({ name, value }) => <div className='call-line'>{name}<span className='call-value datetime' title={value}>{value}</span></div>;
@@ -75,12 +82,12 @@ type Property = {
   text: string;
 };
 
-function renderProperty(property: Property, key: string) {
+function renderProperty(property: Property) {
   let text = property.text.replace(/\n/g, '↵');
   if (property.type === 'string')
     text = `"${text}"`;
   return (
-    <div key={key} className='call-line'>
+    <div key={property.name} className='call-line'>
       {property.name}:<span className={clsx('call-value', property.type)} title={property.text}>{text}</span>
       { ['string', 'number', 'object', 'locator'].includes(property.type) &&
         <CopyToClipboard value={property.text} />