replace useUniqueId() with useId()

there should only be one way to do a thing...

src/editor/Editor.tsx

@@ -20,6 +20,7 @@ import { I18n, useI18n } from '@shopify/react-i18n';
 import tomorrowNightEightiesTheme from 'monaco-themes/themes/Tomorrow-Night-Eighties.json';
 import xcodeTheme from 'monaco-themes/themes/Xcode_default.json';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useId } from 'react-aria';
 import MonacoEditor, {
     ChangeHandler,
     EditorDidMount,
@@ -34,7 +35,6 @@ import { compile } from '../mpy/actions';
 import { useSelector } from '../reducers';
 import { useSettingIsShowDocsEnabled } from '../settings/hooks';
 import { isMacOS } from '../utils/os';
-import { useUniqueId } from '../utils/react';
 import { editorActivateFile, editorCloseFile } from './actions';
 import { I18nId } from './i18n';
 import * as pybricksMicroPython from './pybricksMicroPython';
@@ -94,7 +94,7 @@ type EditorContextMenuItemProps = Readonly<{
 const EditorContextMenuItem: React.VoidFunctionComponent<
     EditorContextMenuItemProps
 > = ({ label, icon, keyboardShortcut, disabled, editor, editorAction }) => {
-    const labelId = useUniqueId('pb-editor');
+    const labelId = useId();
 
     return (
         <MenuItem
@@ -201,7 +201,7 @@ const EditorTabs: React.VoidFunctionComponent<EditorTabsProps> = ({
         [dispatch, onChange],
     );
 
-    const labelId = useUniqueId('pb-editor');
+    const labelId = useId();
 
     // close tab when delete key is pressed
     const handleKeyDown = useCallback(

src/explorer/newFileWizard/NewFileWizard.tsx

@@ -11,6 +11,7 @@ import {
 } from '@blueprintjs/core';
 import { useI18n } from '@shopify/react-i18n';
 import React, { useCallback, useRef, useState } from 'react';
+import { useId } from 'react-aria';
 import { useDispatch } from 'react-redux';
 import { useFileStorageMetadata } from '../../fileStorage/hooks';
 import {
@@ -19,7 +20,6 @@ import {
     validateFileName,
 } from '../../pybricksMicropython/lib';
 import { useSelector } from '../../reducers';
-import { useUniqueId } from '../../utils/react';
 import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
 import { Hub, newFileWizardDidAccept, newFileWizardDidCancel } from './actions';
 import { I18nId } from './i18n';
@@ -56,7 +56,7 @@ const NewFileWizard: React.VoidFunctionComponent = () => {
         dispatch(newFileWizardDidCancel());
     }, [dispatch]);
 
-    const acceptButtonLabelId = useUniqueId('pybricks-explorer');
+    const acceptButtonLabelId = useId();
 
     return (
         <Dialog

src/notifications/UnexpectedErrorNotification.tsx

@@ -7,7 +7,7 @@ import './UnexpectedErrorNotification.scss';
 import { AnchorButton, Button, ButtonGroup, Collapse, Intent } from '@blueprintjs/core';
 import { useI18n } from '@shopify/react-i18n';
 import React, { useState } from 'react';
-import { useUniqueId } from '../utils/react';
+import { useId } from 'react-aria';
 import { I18nId } from './i18n';
 
 type UnexpectedErrorNotificationProps = {
@@ -21,7 +21,7 @@ const UnexpectedErrorNotification: React.VoidFunctionComponent<
     // istanbul ignore next: babel-loader rewrites this line
     const [i18n] = useI18n();
     const [isExpanded, setIsExpanded] = useState(false);
-    const labelId = useUniqueId('pb-notification');
+    const labelId = useId();
 
     return (
         <>

src/utils/react.ts

@@ -1,18 +0,0 @@
-// helper functions for React components
-
-import { useState } from 'react';
-import { createCountFunc } from './iter';
-
-const nextId = createCountFunc();
-
-/**
- * React hook to get a unique identifier, e.g. for linking components via
- * aria-labelledby.
- *
- * @param prefix A namespace prefix for the identifier.
- * @returns A unique identifier in the form "prefix-N"
- */
-export const useUniqueId = (prefix: string): string => {
-    const [uniqueId] = useState(`${prefix}-${nextId()}`);
-    return uniqueId;
-};