diff --git a/extensions/ql-vscode/src/view/compare-performance/ComparePerformance.tsx b/extensions/ql-vscode/src/view/compare-performance/ComparePerformance.tsx
index 1c99a745765..94721cb2a8d 100644
--- a/extensions/ql-vscode/src/view/compare-performance/ComparePerformance.tsx
+++ b/extensions/ql-vscode/src/view/compare-performance/ComparePerformance.tsx
@@ -344,14 +344,23 @@ export function ComparePerformance(_: Record<string, never>) {
     [setData],
   );
 
-  const datasets = useMemo(
-    () =>
-      data == null
-        ? undefined
-        : {
-            from: new ComparisonDataset(data.from),
-            to: new ComparisonDataset(data.to),
-          },
+  if (!data) {
+    return <div>Loading performance comparison...</div>;
+  }
+
+  return <ComparePerformanceWithData data={data} />;
+}
+
+function ComparePerformanceWithData(props: {
+  data: SetPerformanceComparisonQueries;
+}) {
+  const { data } = props;
+
+  const { from, to } = useMemo(
+    () => ({
+      from: new ComparisonDataset(data.from),
+      to: new ComparisonDataset(data.to),
+    }),
     [data],
   );
 
@@ -365,12 +374,6 @@ export function ComparePerformance(_: Record<string, never>) {
 
   const [metric, setMetric] = useState<Metric>(metrics.tuples);
 
-  if (!datasets) {
-    return <div>Loading performance comparison...</div>;
-  }
-
-  const { from, to } = datasets;
-
   const nameSet = new Set(from.data.names);
   for (const name of to.data.names) {
     nameSet.add(name);