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++}`;
+}