From 14fd04a653ac667447089f34144c066fffbc1532 Mon Sep 17 00:00:00 2001
From: Ben Scott <ben.scott@shopify.com>
Date: Wed, 4 Sep 2019 22:01:42 -0700
Subject: [PATCH] Add useUniqueId hook

This hook returns a stable value across multiple rerenders, and can
optionally be overridden with a fixed value

Use this hook in several functional components that currently have
unstable ids that change between rerenders.

Populate the idFactory of this hook in the AppProvider, with eye to
eventually allowing consumers to override the idFactory so it can be
reset between server renders (making this public and configurable is a
follow up step)
---
 UNRELEASED.md                                 |   1 +
 src/components/AppProvider/AppProvider.tsx    |  24 +++-
 src/components/ChoiceList/ChoiceList.tsx      |   7 +-
 .../FormLayout/components/Group/Group.tsx     |   6 +-
 .../Item/components/Secondary/Secondary.tsx   |  10 +-
 src/components/OptionList/OptionList.tsx      |  18 +--
 .../components/Checkbox/Checkbox.tsx          |   8 +-
 .../PolarisTestProvider.tsx                   |  27 ++--
 src/components/RadioButton/RadioButton.tsx    |  11 +-
 .../components/ScrollTo/ScrollTo.tsx          |   6 +-
 src/components/Select/Select.tsx              |   8 +-
 src/components/Toast/Toast.tsx                |  14 +-
 src/utilities/unique-id/context.ts            |   6 +
 src/utilities/unique-id/hooks.ts              |  27 ++++
 src/utilities/unique-id/index.ts              |   5 +
 src/utilities/unique-id/tests/hooks.test.tsx  | 133 ++++++++++++++++++
 .../unique-id/tests/unique-id-factory.test.ts |  36 +++++
 src/utilities/unique-id/unique-id-factory.ts  |  25 ++++
 18 files changed, 303 insertions(+), 69 deletions(-)
 create mode 100644 src/utilities/unique-id/context.ts
 create mode 100644 src/utilities/unique-id/hooks.ts
 create mode 100644 src/utilities/unique-id/index.ts
 create mode 100644 src/utilities/unique-id/tests/hooks.test.tsx
 create mode 100644 src/utilities/unique-id/tests/unique-id-factory.test.ts
 create mode 100644 src/utilities/unique-id/unique-id-factory.ts

diff --git a/UNRELEASED.md b/UNRELEASED.md
index e22a6ef38fa..a5142852b06 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -25,5 +25,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Code quality
 
 - Migrated `ActionMenu.RollupAction`, `Autocomplete`, `Card`, `EmptySearchResult`, `Form`, `SkeletonPage` and `TopBar` to use hooks instead of withAppProvider ([#2065](https://github.com/Shopify/polaris-react/pull/2065))
+- Added `useUniqueId` hook that can be used to get a unique id that remains consistent between rerenders and update components to use it where appropriate ([#2079](https://github.com/Shopify/polaris-react/pull/2079))
 
 ### Deprecations
diff --git a/src/components/AppProvider/AppProvider.tsx b/src/components/AppProvider/AppProvider.tsx
index f8d3f963f0a..2d385692782 100644
--- a/src/components/AppProvider/AppProvider.tsx
+++ b/src/components/AppProvider/AppProvider.tsx
@@ -16,6 +16,11 @@ import {
   StickyManagerContext,
 } from '../../utilities/sticky-manager';
 import {LinkContext, LinkLikeComponent} from '../../utilities/link';
+import {
+  UniqueIdFactory,
+  UniqueIdFactoryContext,
+  globalIdGeneratorFactory,
+} from '../../utilities/unique-id';
 
 interface State {
   intl: I18n;
@@ -35,11 +40,14 @@ export interface AppProviderProps extends AppBridgeOptions {
 export class AppProvider extends React.Component<AppProviderProps, State> {
   private stickyManager: StickyManager;
   private scrollLockManager: ScrollLockManager;
+  private uniqueIdFactory: UniqueIdFactory;
 
   constructor(props: AppProviderProps) {
     super(props);
     this.stickyManager = new StickyManager();
     this.scrollLockManager = new ScrollLockManager();
+    this.uniqueIdFactory = new UniqueIdFactory(globalIdGeneratorFactory);
+
     const {i18n, apiKey, shopOrigin, forceRedirect, linkComponent} = this.props;
 
     // eslint-disable-next-line react/state-in-constructor
@@ -91,13 +99,15 @@ export class AppProvider extends React.Component<AppProviderProps, State> {
       <I18nContext.Provider value={intl}>
         <ScrollLockManagerContext.Provider value={this.scrollLockManager}>
           <StickyManagerContext.Provider value={this.stickyManager}>
-            <AppBridgeContext.Provider value={appBridge}>
-              <LinkContext.Provider value={link}>
-                <ThemeProvider theme={theme}>
-                  {React.Children.only(children)}
-                </ThemeProvider>
-              </LinkContext.Provider>
-            </AppBridgeContext.Provider>
+            <UniqueIdFactoryContext.Provider value={this.uniqueIdFactory}>
+              <AppBridgeContext.Provider value={appBridge}>
+                <LinkContext.Provider value={link}>
+                  <ThemeProvider theme={theme}>
+                    {React.Children.only(children)}
+                  </ThemeProvider>
+                </LinkContext.Provider>
+              </AppBridgeContext.Provider>
+            </UniqueIdFactoryContext.Provider>
           </StickyManagerContext.Provider>
         </ScrollLockManagerContext.Provider>
       </I18nContext.Provider>
diff --git a/src/components/ChoiceList/ChoiceList.tsx b/src/components/ChoiceList/ChoiceList.tsx
index 1e02afce763..567a218c39d 100644
--- a/src/components/ChoiceList/ChoiceList.tsx
+++ b/src/components/ChoiceList/ChoiceList.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 
 import {classNames} from '../../utilities/css';
+import {useUniqueId} from '../../utilities/unique-id';
 import {Checkbox} from '../Checkbox';
 import {RadioButton} from '../RadioButton';
 import {InlineError, errorTextID} from '../InlineError';
@@ -48,8 +48,6 @@ export interface ChoiceListProps {
   onChange?(selected: string[], name: string): void;
 }
 
-const getUniqueID = createUniqueIDFactory('ChoiceList');
-
 export function ChoiceList({
   title,
   titleHidden,
@@ -59,12 +57,13 @@ export function ChoiceList({
   onChange = noop,
   error,
   disabled = false,
-  name = getUniqueID(),
+  name: nameProp,
 }: ChoiceListProps) {
   // Type asserting to any is required for TS3.2 but can be removed when we update to 3.3
   // see https://github.com/Microsoft/TypeScript/issues/28768
   const ControlComponent: any = allowMultiple ? Checkbox : RadioButton;
 
+  const name = useUniqueId('ChoiceList', nameProp);
   const finalName = allowMultiple ? `${name}[]` : name;
 
   const className = classNames(
diff --git a/src/components/FormLayout/components/Group/Group.tsx b/src/components/FormLayout/components/Group/Group.tsx
index 232fc2a043c..ccc91650cb1 100644
--- a/src/components/FormLayout/components/Group/Group.tsx
+++ b/src/components/FormLayout/components/Group/Group.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 
 import {classNames} from '../../../../utilities/css';
 import {wrapWithComponent} from '../../../../utilities/components';
+import {useUniqueId} from '../../../../utilities/unique-id';
 import styles from '../../FormLayout.scss';
 import {Item} from '../Item';
 
@@ -13,12 +13,10 @@ export interface GroupProps {
   helpText?: React.ReactNode;
 }
 
-const getUniqueID = createUniqueIDFactory('FormLayoutGroup');
-
 export function Group({children, condensed, title, helpText}: GroupProps) {
   const className = classNames(condensed ? styles.condensed : styles.grouped);
 
-  const id = getUniqueID();
+  const id = useUniqueId('FormLayoutGroup');
 
   let helpTextElement = null;
   let helpTextID: undefined | string;
diff --git a/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx b/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx
index f175b851db7..a521ec0594f 100644
--- a/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx
+++ b/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx
@@ -1,23 +1,19 @@
 import React from 'react';
-import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 
+import {useUniqueId} from '../../../../../../utilities/unique-id';
 import {Collapsible} from '../../../../../Collapsible';
 
 import styles from '../../../../Navigation.scss';
 
-const createSecondaryNavigationId = createUniqueIDFactory(
-  'SecondaryNavigation',
-);
-
 interface SecondaryProps {
   expanded: boolean;
   children?: React.ReactNode;
 }
 
 export function Secondary({children, expanded}: SecondaryProps) {
-  const secondaryNavigationId = createSecondaryNavigationId();
+  const id = useUniqueId('SecondaryNavigation');
   return (
-    <Collapsible id={secondaryNavigationId} open={expanded}>
+    <Collapsible id={id} open={expanded}>
       <ul className={styles.List}>{children}</ul>
     </Collapsible>
   );
diff --git a/src/components/OptionList/OptionList.tsx b/src/components/OptionList/OptionList.tsx
index d10a95b9348..604981788ee 100644
--- a/src/components/OptionList/OptionList.tsx
+++ b/src/components/OptionList/OptionList.tsx
@@ -1,10 +1,10 @@
-import React, {useState, useRef, useCallback} from 'react';
-import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
+import React, {useState, useCallback} from 'react';
 
 import {arraysAreEqual} from '../../utilities/arrays';
 import {IconProps} from '../../types';
 import {AvatarProps} from '../Avatar';
 import {ThumbnailProps} from '../Thumbnail';
+import {useUniqueId} from '../../utilities/unique-id';
 import {useDeepEffect} from '../../utilities/use-deep-effect';
 
 import {Option} from './components';
@@ -34,8 +34,6 @@ export interface SectionDescriptor {
 
 type Descriptor = OptionDescriptor | SectionDescriptor;
 
-const getUniqueId = createUniqueIDFactory('OptionList');
-
 export interface OptionListProps {
   /** A unique identifier for the option list */
   id?: string;
@@ -66,16 +64,12 @@ export function OptionList({
   role,
   optionRole,
   onChange,
-  id: propId,
+  id: idProp,
 }: OptionListProps) {
   const [normalizedOptions, setNormalizedOptions] = useState(
     createNormalizedOptions(options, sections, title),
   );
-  const id = useRef(propId || getUniqueId());
-
-  if (id.current !== propId) {
-    id.current = propId || id.current;
-  }
+  const id = useUniqueId('OptionList', idProp);
 
   useDeepEffect(
     () => {
@@ -122,7 +116,7 @@ export function OptionList({
           options.map((option, optionIndex) => {
             const isSelected = selected.includes(option.value);
             const optionId =
-              option.id || `${id.current}-${sectionIndex}-${optionIndex}`;
+              option.id || `${id}-${sectionIndex}-${optionIndex}`;
 
             return (
               <Option
@@ -144,7 +138,7 @@ export function OptionList({
             {titleMarkup}
             <ul
               className={styles.Options}
-              id={`${id.current}-${sectionIndex}`}
+              id={`${id}-${sectionIndex}`}
               role={role}
               aria-multiselectable={allowMultiple}
             >
diff --git a/src/components/OptionList/components/Checkbox/Checkbox.tsx b/src/components/OptionList/components/Checkbox/Checkbox.tsx
index 30a6c3a413f..cb17cfede7d 100644
--- a/src/components/OptionList/components/Checkbox/Checkbox.tsx
+++ b/src/components/OptionList/components/Checkbox/Checkbox.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {TickSmallMinor} from '@shopify/polaris-icons';
-import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 import {classNames} from '../../../../utilities/css';
+import {useUniqueId} from '../../../../utilities/unique-id';
 import {Icon} from '../../../Icon';
 
 import styles from './Checkbox.scss';
@@ -17,10 +17,8 @@ export interface CheckboxProps {
   onChange(): void;
 }
 
-const getUniqueID = createUniqueIDFactory('Checkbox');
-
 export function Checkbox({
-  id = getUniqueID(),
+  id: idProp,
   checked = false,
   disabled,
   active,
@@ -29,6 +27,8 @@ export function Checkbox({
   value,
   role,
 }: CheckboxProps) {
+  const id = useUniqueId('Checkbox', idProp);
+
   const className = classNames(styles.Checkbox, active && styles.active);
   return (
     <div className={className}>
diff --git a/src/components/PolarisTestProvider/PolarisTestProvider.tsx b/src/components/PolarisTestProvider/PolarisTestProvider.tsx
index 0018bedd646..2e072771ef2 100644
--- a/src/components/PolarisTestProvider/PolarisTestProvider.tsx
+++ b/src/components/PolarisTestProvider/PolarisTestProvider.tsx
@@ -12,6 +12,11 @@ import {
 import {AppBridgeContext, AppBridgeOptions} from '../../utilities/app-bridge';
 import {I18n, I18nContext, TranslationDictionary} from '../../utilities/i18n';
 import {LinkContext, LinkLikeComponent} from '../../utilities/link';
+import {
+  UniqueIdFactory,
+  UniqueIdFactoryContext,
+  globalIdGeneratorFactory,
+} from '../../utilities/unique-id';
 
 type FrameContextType = NonNullable<React.ContextType<typeof FrameContext>>;
 
@@ -53,6 +58,8 @@ export function PolarisTestProvider({
 
   const stickyManager = new StickyManager();
 
+  const uniqueIdFactory = new UniqueIdFactory(globalIdGeneratorFactory);
+
   // This typing is odd, but as appBridge is deprecated and going away in v5
   // I'm not that worried about it
   const appBridgeApp = appBridge as React.ContextType<typeof AppBridgeContext>;
@@ -66,15 +73,17 @@ export function PolarisTestProvider({
       <I18nContext.Provider value={intl}>
         <ScrollLockManagerContext.Provider value={scrollLockManager}>
           <StickyManagerContext.Provider value={stickyManager}>
-            <AppBridgeContext.Provider value={appBridgeApp}>
-              <LinkContext.Provider value={link}>
-                <ThemeContext.Provider value={mergedTheme}>
-                  <FrameContext.Provider value={mergedFrame}>
-                    {children}
-                  </FrameContext.Provider>
-                </ThemeContext.Provider>
-              </LinkContext.Provider>
-            </AppBridgeContext.Provider>
+            <UniqueIdFactoryContext.Provider value={uniqueIdFactory}>
+              <AppBridgeContext.Provider value={appBridgeApp}>
+                <LinkContext.Provider value={link}>
+                  <ThemeContext.Provider value={mergedTheme}>
+                    <FrameContext.Provider value={mergedFrame}>
+                      {children}
+                    </FrameContext.Provider>
+                  </ThemeContext.Provider>
+                </LinkContext.Provider>
+              </AppBridgeContext.Provider>
+            </UniqueIdFactoryContext.Provider>
           </StickyManagerContext.Provider>
         </ScrollLockManagerContext.Provider>
       </I18nContext.Provider>
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index 23686939b0d..b32983db242 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
+import {useUniqueId} from '../../utilities/unique-id';
 import {Choice, helpTextID} from '../Choice';
 import styles from './RadioButton.scss';
 
@@ -32,8 +32,6 @@ export interface BaseProps {
 
 export interface RadioButtonProps extends BaseProps {}
 
-const getUniqueID = createUniqueIDFactory('RadioButton');
-
 export function RadioButton({
   ariaDescribedBy: ariaDescribedByProp,
   label,
@@ -44,10 +42,13 @@ export function RadioButton({
   onChange,
   onFocus,
   onBlur,
-  id = getUniqueID(),
-  name = id,
+  id: providedId,
+  name: providedName,
   value,
 }: RadioButtonProps) {
+  const id = useUniqueId('RadioButton', providedId);
+  const name = providedName || id;
+
   function handleChange({currentTarget}: React.ChangeEvent<HTMLInputElement>) {
     onChange && onChange(currentTarget.checked, id);
   }
diff --git a/src/components/Scrollable/components/ScrollTo/ScrollTo.tsx b/src/components/Scrollable/components/ScrollTo/ScrollTo.tsx
index fefb53435c4..3ad6c5242f8 100644
--- a/src/components/Scrollable/components/ScrollTo/ScrollTo.tsx
+++ b/src/components/Scrollable/components/ScrollTo/ScrollTo.tsx
@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useRef} from 'react';
-import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
+import {useUniqueId} from '../../../../utilities/unique-id';
 import {ScrollableContext} from '../../context';
 
 export function ScrollTo() {
@@ -14,7 +14,7 @@ export function ScrollTo() {
     scrollToPosition(anchorNode.current.offsetTop);
   }, [scrollToPosition]);
 
-  const getUniqueId = createUniqueIDFactory(`ScrollTo`);
+  const id = useUniqueId(`ScrollTo`);
   // eslint-disable-next-line jsx-a11y/anchor-is-valid
-  return <a id={getUniqueId()} ref={anchorNode} />;
+  return <a id={id} ref={anchorNode} />;
 }
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index c2d4d904216..2ceb85c573b 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import {ArrowUpDownMinor} from '@shopify/polaris-icons';
-import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
-
 import {classNames} from '../../utilities/css';
+import {useUniqueId} from '../../utilities/unique-id';
 import {Labelled, Action, helpTextID} from '../Labelled';
 import {Icon} from '../Icon';
 import {Error} from '../../types';
@@ -72,7 +71,6 @@ export interface BaseProps {
 export interface SelectProps extends BaseProps {}
 
 const PLACEHOLDER_VALUE = '';
-const getUniqueID = createUniqueIDFactory('Select');
 
 export function Select({
   options: optionsProp,
@@ -83,7 +81,7 @@ export function Select({
   disabled,
   helpText,
   placeholder,
-  id = getUniqueID(),
+  id: idProp,
   name,
   value = PLACEHOLDER_VALUE,
   error,
@@ -91,6 +89,8 @@ export function Select({
   onFocus,
   onBlur,
 }: SelectProps) {
+  const id = useUniqueId('Select', idProp);
+
   const labelHidden = labelInline ? true : labelHiddenProp;
 
   const className = classNames(
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 7334011b2e8..35894830495 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -1,14 +1,12 @@
 import React, {useRef} from 'react';
-import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 import {Toast as AppBridgeToast} from '@shopify/app-bridge/actions';
 
 import {DEFAULT_TOAST_DURATION} from '../Frame';
 import {ToastProps, useFrame} from '../../utilities/frame';
+import {useUniqueId} from '../../utilities/unique-id';
 import {useDeepEffect} from '../../utilities/use-deep-effect';
 import {useAppBridge} from '../../utilities/app-bridge';
 
-const createId = createUniqueIDFactory('Toast');
-
 // The script in the styleguide that generates the Props Explorer data expects
 // a component's props to be found in the Props interface. This silly workaround
 // ensures that the Props Explorer table is generated correctly, instead of
@@ -19,7 +17,7 @@ export interface ToastProps extends ToastProps {}
 // https://github.com/yannickcr/eslint-plugin-react/issues/2324
 // eslint-disable-next-line react/display-name
 export const Toast = React.memo(function Toast(props: ToastProps) {
-  const id = useRef(createId());
+  const id = useUniqueId('Toast');
   const appBridgeToast = useRef<AppBridgeToast.Toast>();
   const {showToast, hideToast} = useFrame();
   const appBridge = useAppBridge();
@@ -31,13 +29,9 @@ export const Toast = React.memo(function Toast(props: ToastProps) {
       duration = DEFAULT_TOAST_DURATION,
       onDismiss,
     } = props;
-    const toastId = id.current;
 
     if (appBridge == null) {
-      showToast({
-        id: id.current,
-        ...props,
-      });
+      showToast({id, ...props});
     } else {
       // eslint-disable-next-line no-console
       console.warn(
@@ -56,7 +50,7 @@ export const Toast = React.memo(function Toast(props: ToastProps) {
 
     return () => {
       if (appBridge == null) {
-        hideToast({id: toastId});
+        hideToast({id});
       } else if (appBridgeToast.current != null) {
         appBridgeToast.current.unsubscribe();
       }
diff --git a/src/utilities/unique-id/context.ts b/src/utilities/unique-id/context.ts
new file mode 100644
index 00000000000..ff075a0a9c7
--- /dev/null
+++ b/src/utilities/unique-id/context.ts
@@ -0,0 +1,6 @@
+import React from 'react';
+import {UniqueIdFactory} from './unique-id-factory';
+
+export const UniqueIdFactoryContext = React.createContext<
+  UniqueIdFactory | undefined
+>(undefined);
diff --git a/src/utilities/unique-id/hooks.ts b/src/utilities/unique-id/hooks.ts
new file mode 100644
index 00000000000..481f852a3d2
--- /dev/null
+++ b/src/utilities/unique-id/hooks.ts
@@ -0,0 +1,27 @@
+import {useContext, useRef} from 'react';
+import {UniqueIdFactoryContext} from './context';
+
+export function useUniqueId(prefix = '', override?: string) {
+  const idFactory = useContext(UniqueIdFactoryContext);
+
+  if (!idFactory) {
+    throw new Error(
+      'No UniqueIdFactory was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/structure/app-provider for implementation instructions.',
+    );
+  }
+
+  // Use a ref to ensure that the returned ID does not increment on every
+  // rerendering of a component
+  // The first time a component is rendered the ref will be empty.
+  // In that case fill it with the next available ID
+  // Only populating this on first render means we don't create a new Id on
+  // every render
+  const currentComponentIdRef = useRef<string | null>(null);
+
+  if (!currentComponentIdRef.current) {
+    // If an override was specified, then use that instead of incrementing the ID
+    currentComponentIdRef.current = override || idFactory.nextId(prefix);
+  }
+
+  return currentComponentIdRef.current;
+}
diff --git a/src/utilities/unique-id/index.ts b/src/utilities/unique-id/index.ts
new file mode 100644
index 00000000000..014b6805e7f
--- /dev/null
+++ b/src/utilities/unique-id/index.ts
@@ -0,0 +1,5 @@
+export {UniqueIdFactoryContext} from './context';
+
+export {useUniqueId} from './hooks';
+
+export {UniqueIdFactory, globalIdGeneratorFactory} from './unique-id-factory';
diff --git a/src/utilities/unique-id/tests/hooks.test.tsx b/src/utilities/unique-id/tests/hooks.test.tsx
new file mode 100644
index 00000000000..c563bc2e0c4
--- /dev/null
+++ b/src/utilities/unique-id/tests/hooks.test.tsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import {mountWithApp} from 'test-utilities';
+import {useUniqueId} from '../hooks';
+
+function TestHarness({children}: {children: React.ReactNode}) {
+  return <React.Fragment>{children}</React.Fragment>;
+}
+
+const Component1 = () => <React.Fragment>{useUniqueId()}</React.Fragment>;
+const Component2 = () => <React.Fragment>{useUniqueId()}</React.Fragment>;
+const Component3 = () => <React.Fragment>{useUniqueId()}</React.Fragment>;
+
+const HasPrefix1 = () => <React.Fragment>{useUniqueId('a')}</React.Fragment>;
+const HasPrefix2 = () => <React.Fragment>{useUniqueId('a')}</React.Fragment>;
+const HasPrefix3 = () => <React.Fragment>{useUniqueId('a')}</React.Fragment>;
+const HasPrefix4 = () => <React.Fragment>{useUniqueId('b')}</React.Fragment>;
+
+describe('useUniqueId', () => {
+  it('returns unique IDs across a single component', () => {
+    const harness = mountWithApp(
+      <TestHarness>
+        <Component1 />
+        <Component1 />
+        <Component1 />
+        <HasPrefix1 />
+        <HasPrefix1 />
+        <HasPrefix1 />
+      </TestHarness>,
+    );
+
+    expect(harness.findAll(Component1)[0].html()).toStrictEqual('polaris-1');
+    expect(harness.findAll(Component1)[1].html()).toStrictEqual('polaris-2');
+    expect(harness.findAll(Component1)[2].html()).toStrictEqual('polaris-3');
+
+    expect(harness.findAll(HasPrefix1)[0].html()).toStrictEqual('polaris-a1');
+    expect(harness.findAll(HasPrefix1)[1].html()).toStrictEqual('polaris-a2');
+    expect(harness.findAll(HasPrefix1)[2].html()).toStrictEqual('polaris-a3');
+  });
+
+  it('returns unique IDs across multiple components', () => {
+    const harness = mountWithApp(
+      <TestHarness>
+        <Component1 />
+        <Component2 />
+        <Component3 />
+        <HasPrefix1 />
+        <HasPrefix2 />
+        <HasPrefix3 />
+        <HasPrefix4 />
+      </TestHarness>,
+    );
+
+    expect(harness.find(Component1)!.html()).toStrictEqual('polaris-1');
+    expect(harness.find(Component2)!.html()).toStrictEqual('polaris-2');
+    expect(harness.find(Component3)!.html()).toStrictEqual('polaris-3');
+
+    expect(harness.find(HasPrefix1)!.html()).toStrictEqual('polaris-a1');
+    expect(harness.find(HasPrefix2)!.html()).toStrictEqual('polaris-a2');
+    expect(harness.find(HasPrefix3)!.html()).toStrictEqual('polaris-a3');
+    expect(harness.find(HasPrefix4)!.html()).toStrictEqual('polaris-b1');
+  });
+
+  it('increments multiple IDs within the same component', () => {
+    const HasMultipleIds = () => (
+      <React.Fragment>
+        {useUniqueId()} :: {useUniqueId()}
+      </React.Fragment>
+    );
+
+    const harness = mountWithApp(<HasMultipleIds />);
+
+    expect(harness.html()).toStrictEqual('polaris-1 :: polaris-2');
+  });
+
+  it('uses an override if specified', () => {
+    const HasOverride = () => (
+      <React.Fragment>{useUniqueId('', 'overridden')}</React.Fragment>
+    );
+
+    const harness = mountWithApp(<HasOverride />);
+
+    expect(harness.html()).toStrictEqual('overridden');
+  });
+
+  it('uses an override if specified and the override does not interupt the count', () => {
+    const HasOverride = ({idOverride}: {idOverride?: string}) => (
+      <React.Fragment>{useUniqueId('', idOverride)}</React.Fragment>
+    );
+
+    const harness = mountWithApp(
+      <TestHarness>
+        <HasOverride />
+        <HasOverride idOverride="overridden" />
+        <HasOverride />
+      </TestHarness>,
+    );
+
+    expect(harness.findAll(HasOverride)[0].html()).toStrictEqual('polaris-1');
+    expect(harness.findAll(HasOverride)[1].html()).toStrictEqual('overridden');
+    expect(harness.findAll(HasOverride)[2].html()).toStrictEqual('polaris-2');
+  });
+
+  it('keeps the same ID across multiple rerenders', () => {
+    const HasProp = ({info}: {info: string}) => (
+      <React.Fragment>
+        {info} :: {useUniqueId()}
+      </React.Fragment>
+    );
+
+    const ReRenderingTestHarness = () => {
+      const [count, setCount] = React.useState(1);
+      const incrementCount = React.useCallback(
+        () => setCount((count) => count + 1),
+        [],
+      );
+
+      return (
+        <React.Fragment>
+          <button onClick={incrementCount}>Click Me</button>
+          <HasProp info={`count${count}`} />
+        </React.Fragment>
+      );
+    };
+
+    const harness = mountWithApp(<ReRenderingTestHarness />);
+
+    expect(harness.find(HasProp)!.html()).toStrictEqual('count1 :: polaris-1');
+
+    harness.find('button')!.trigger('onClick');
+
+    expect(harness.find(HasProp)!.html()).toStrictEqual('count2 :: polaris-1');
+  });
+});
diff --git a/src/utilities/unique-id/tests/unique-id-factory.test.ts b/src/utilities/unique-id/tests/unique-id-factory.test.ts
new file mode 100644
index 00000000000..f53f13dc63c
--- /dev/null
+++ b/src/utilities/unique-id/tests/unique-id-factory.test.ts
@@ -0,0 +1,36 @@
+import {UniqueIdFactory, globalIdGeneratorFactory} from '../unique-id-factory';
+
+describe('UniqueIdFactory', () => {
+  it('returns unique IDs across multiple calls', () => {
+    const uniqueIdFactory = new UniqueIdFactory(globalIdGeneratorFactory);
+
+    expect(uniqueIdFactory.nextId('')).toStrictEqual('polaris-1');
+    expect(uniqueIdFactory.nextId('')).toStrictEqual('polaris-2');
+    expect(uniqueIdFactory.nextId('')).toStrictEqual('polaris-3');
+
+    expect(uniqueIdFactory.nextId('a')).toStrictEqual('polaris-a1');
+    expect(uniqueIdFactory.nextId('a')).toStrictEqual('polaris-a2');
+    expect(uniqueIdFactory.nextId('a')).toStrictEqual('polaris-a3');
+  });
+
+  it('returns unique IDs across prefixes', () => {
+    const uniqueIdFactory = new UniqueIdFactory(globalIdGeneratorFactory);
+
+    expect(uniqueIdFactory.nextId('a')).toStrictEqual('polaris-a1');
+    expect(uniqueIdFactory.nextId('a')).toStrictEqual('polaris-a2');
+    expect(uniqueIdFactory.nextId('a')).toStrictEqual('polaris-a3');
+  });
+
+  it('can accept a custom factory', () => {
+    const customIdGeneratorFactory = (prefix: string) => {
+      let index = 101;
+      return () => `custom-${prefix}${index++}`;
+    };
+
+    const uniqueIdFactory = new UniqueIdFactory(customIdGeneratorFactory);
+
+    expect(uniqueIdFactory.nextId('')).toStrictEqual('custom-101');
+    expect(uniqueIdFactory.nextId('')).toStrictEqual('custom-102');
+    expect(uniqueIdFactory.nextId('a')).toStrictEqual('custom-a101');
+  });
+});
diff --git a/src/utilities/unique-id/unique-id-factory.ts b/src/utilities/unique-id/unique-id-factory.ts
new file mode 100644
index 00000000000..836a19ce79f
--- /dev/null
+++ b/src/utilities/unique-id/unique-id-factory.ts
@@ -0,0 +1,25 @@
+type IdGenerator = () => string;
+type IdGeneratorFactory = (prefix: string) => IdGenerator;
+
+export class UniqueIdFactory {
+  private idGeneratorFactory: IdGeneratorFactory;
+
+  private idGenerators: Record<string, IdGenerator> = {};
+
+  constructor(idGeneratorFactory: IdGeneratorFactory) {
+    this.idGeneratorFactory = idGeneratorFactory;
+  }
+
+  nextId(prefix: string) {
+    if (!this.idGenerators[prefix]) {
+      this.idGenerators[prefix] = this.idGeneratorFactory(prefix);
+    }
+
+    return this.idGenerators[prefix]();
+  }
+}
+
+export function globalIdGeneratorFactory(prefix = '') {
+  let index = 1;
+  return () => `polaris-${prefix}${index++}`;
+}