Check for nullness of 'data' in a separate component

This ensures we can use hooks after the check in the main component

Author: asgerf

extensions/ql-vscode/src/view/compare-performance/ComparePerformance.tsx

@@ -357,14 +357,23 @@ export function ComparePerformance(_: Record<string, never>) {
     [setData],
   );
 
+  if (!data) {
+    return <div>Loading performance comparison...</div>;
+  }
+
+  return <ComparePerformanceWithData data={data} />;
+}
+
+function ComparePerformanceWithData(props: {
+  data: SetPerformanceComparisonQueries;
+}) {
+  const { data } = props;
+
   const datasets = useMemo(
-    () =>
-      data == null
-        ? undefined
-        : {
-            from: new ComparisonDataset(data.from),
-            to: new ComparisonDataset(data.to),
-          },
+    () => ({
+      from: new ComparisonDataset(data.from),
+      to: new ComparisonDataset(data.to),
+    }),
     [data],
   );
 
@@ -378,10 +387,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);