From 7e03f38a3bc2fa66775b670d3c6e9a67c2c3a7a3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Dec 2024 14:11:03 +0000
Subject: [PATCH] Switch to React18 useId (#28651)

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/settings/AvatarSetting.tsx  |  3 +--
 .../views/settings/UserProfileSettings.tsx       |  3 +--
 src/utils/useId.ts                               | 16 ----------------
 3 files changed, 2 insertions(+), 20 deletions(-)
 delete mode 100644 src/utils/useId.ts

diff --git a/src/components/views/settings/AvatarSetting.tsx b/src/components/views/settings/AvatarSetting.tsx
index b6ce5415903..ee47094cf93 100644
--- a/src/components/views/settings/AvatarSetting.tsx
+++ b/src/components/views/settings/AvatarSetting.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ReactNode, createRef, useCallback, useEffect, useState } from "react";
+import React, { ReactNode, createRef, useCallback, useEffect, useState, useId } from "react";
 import EditIcon from "@vector-im/compound-design-tokens/assets/web/icons/edit";
 import UploadIcon from "@vector-im/compound-design-tokens/assets/web/icons/share";
 import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete";
@@ -16,7 +16,6 @@ import classNames from "classnames";
 import { _t } from "../../../languageHandler";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
-import { useId } from "../../../utils/useId";
 import AccessibleButton from "../elements/AccessibleButton";
 import BaseAvatar from "../avatars/BaseAvatar";
 import Modal from "../../../Modal.tsx";
diff --git a/src/components/views/settings/UserProfileSettings.tsx b/src/components/views/settings/UserProfileSettings.tsx
index 403b6349c9d..83a00c122d4 100644
--- a/src/components/views/settings/UserProfileSettings.tsx
+++ b/src/components/views/settings/UserProfileSettings.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import React, { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState, useId } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
 import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
@@ -20,7 +20,6 @@ import { formatBytes } from "../../../utils/FormattingUtils";
 import { useToastContext } from "../../../contexts/ToastContext";
 import InlineSpinner from "../elements/InlineSpinner";
 import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
-import { useId } from "../../../utils/useId";
 import CopyableText from "../elements/CopyableText";
 import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 import AccessibleButton from "../elements/AccessibleButton";
diff --git a/src/utils/useId.ts b/src/utils/useId.ts
deleted file mode 100644
index 6f7cf795980..00000000000
--- a/src/utils/useId.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2024 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-
-const getUniqueId = (() => {
-    return () => `:r${Math.random()}:`;
-})();
-
-// Replace this with React's own useId once we switch to React 18
-export const useId = (): string => React.useMemo(getUniqueId, []);