bug: work around a material ui bug of calling the callback twice

Signed-off-by: blam <ben@blam.sh>

packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx

@@ -20,7 +20,7 @@
 import { makeStyles } from '@material-ui/core/styles';
 import TabUI, { TabProps } from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 /** @public */
 export type HeaderTabsClassKey =
@@ -80,12 +80,15 @@ export function HeaderTabs(props: HeaderTabsProps) {
   const [selectedTab, setSelectedTab] = useState<number>(selectedIndex ?? 0);
   const styles = useStyles();
 
-  const handleChange = (_: React.ChangeEvent<{}>, index: number) => {
-    if (selectedIndex === undefined) {
-      setSelectedTab(index);
-    }
-    if (onChange) onChange(index);
-  };
+  const handleChange = useCallback(
+    (_: React.ChangeEvent<{}>, index: number) => {
+      if (selectedIndex === undefined) {
+        setSelectedTab(index);
+      }
+      if (onChange && selectedIndex !== index) onChange(index);
+    },
+    [selectedIndex, onChange],
+  );
 
   useEffect(() => {
     if (selectedIndex !== undefined) {