From 470f28c7520f377eac279c1ad13e0d385800691c Mon Sep 17 00:00:00 2001
From: JeremyRH <holcomb227@gmail.com>
Date: Tue, 13 Jan 2026 16:12:04 -0800
Subject: [PATCH 1/2] fix: make unique id generation come from context when
 provided

---
 .../Checkbox/CheckboxBooleanInput.tsx         |  6 +-
 src/components/Form/FormChoice.js             | 93 +++++++++----------
 .../HasManyFields/HasManyFieldsRow.tsx        |  6 +-
 src/components/HelpBubble/HelpBubble.tsx      |  4 +-
 src/components/List/List.tsx                  |  4 +-
 src/components/List/ListItem.tsx              |  4 +-
 .../List/components/FilterHeader.tsx          |  6 +-
 src/components/List/components/SortHeader.tsx |  6 +-
 src/components/Table/SortableTable.js         | 45 +++++----
 src/components/Tooltip/TooltipButton.tsx      |  6 +-
 src/components/Tree/TreeItem.tsx              |  6 +-
 .../TruncatedText/TruncatedText.tsx           |  7 +-
 src/context.tsx                               | 11 +++
 src/index.ts                                  |  1 +
 src/util/uniqueId.ts                          |  8 --
 src/util/uniqueId.tsx                         | 17 ++++
 16 files changed, 125 insertions(+), 105 deletions(-)
 create mode 100644 src/context.tsx
 delete mode 100644 src/util/uniqueId.ts
 create mode 100644 src/util/uniqueId.tsx

diff --git a/src/components/Checkbox/CheckboxBooleanInput.tsx b/src/components/Checkbox/CheckboxBooleanInput.tsx
index 28093f409..135044bf8 100644
--- a/src/components/Checkbox/CheckboxBooleanInput.tsx
+++ b/src/components/Checkbox/CheckboxBooleanInput.tsx
@@ -1,7 +1,7 @@
 import classnames from 'classnames';
-import React, { useState } from 'react';
+import React from 'react';
 import type { InputProps } from 'reactstrap';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import FormGroup from '../Form/FormGroup';
 import Input from '../Input/Input';
 import Label from '../Label/Label';
@@ -19,7 +19,7 @@ function CheckboxBooleanInput({
   value,
   ...inputProps
 }: CheckboxBooleanInputProps) {
-  const [generatedId] = useState(() => getUniqueId('checkbox-boolean-input-'));
+  const generatedId = useUniqueId('checkbox-boolean-input-');
   const id = inputProps.id || generatedId;
   const classNames = classnames('pt-2', className);
   return (
diff --git a/src/components/Form/FormChoice.js b/src/components/Form/FormChoice.js
index 974126a07..212f12ea5 100644
--- a/src/components/Form/FormChoice.js
+++ b/src/components/Form/FormChoice.js
@@ -1,63 +1,56 @@
 import classname from 'classnames';
 import React from 'react';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import Input from '../Input/Input';
 import Label from '../Label/Label';
 import FormGroup from './FormGroup';
 
-class FormChoice extends React.Component {
-  constructor(props) {
-    super(props);
-    this.id = props.id || getUniqueId('form-choice-');
-  }
-
-  render() {
-    /* eslint-disable-next-line  @typescript-eslint/no-unused-vars -- Let's figure out a better way to omit props for this scenario */
-    const { id, inline, disabled, children, containerClassName, type, value, ...attributes } =
-      this.props;
-
-    if (type === 'select') {
-      return (
-        <option {...attributes} disabled={disabled} value={value}>
-          {children}
-        </option>
-      );
-    }
-
-    const containerClasses = classname({ 'form-check-inline': inline }, containerClassName);
-
-    const computedValue = value || children;
-
-    const item = (
-      <div className={containerClasses}>
-        <Input
-          id={this.id}
-          type={type}
-          {...attributes}
-          disabled={disabled}
-          value={computedValue}
-          style={{ cursor: disabled && 'not-allowed' }}
-        />
-        <Label
-          className="form-check-label"
-          check={!inline}
-          for={this.id}
-          style={{ cursor: disabled && 'not-allowed' }}
-        >
-          {children}
-        </Label>
-      </div>
-    );
+function FormChoice({ id, inline, disabled, children, containerClassName, type, value, ...props }) {
+  const generatedId = useUniqueId('form-choice-');
+  const idToUse = id || generatedId;
 
-    if (inline) {
-      return item;
-    }
+  if (type === 'select') {
     return (
-      <FormGroup check disabled={disabled}>
-        {item}
-      </FormGroup>
+      <option {...props} disabled={disabled} value={value}>
+        {children}
+      </option>
     );
   }
+
+  const containerClasses = classname({ 'form-check-inline': inline }, containerClassName);
+
+  const computedValue = value || children;
+
+  const item = (
+    <div className={containerClasses}>
+      <Input
+        id={idToUse}
+        type={type}
+        {...props}
+        disabled={disabled}
+        value={computedValue}
+        style={{ cursor: disabled && 'not-allowed' }}
+      />
+      <Label
+        className="form-check-label"
+        check={!inline}
+        for={idToUse}
+        style={{ cursor: disabled && 'not-allowed' }}
+      >
+        {children}
+      </Label>
+    </div>
+  );
+
+  if (inline) {
+    return item;
+  }
+
+  return (
+    <FormGroup check disabled={disabled}>
+      {item}
+    </FormGroup>
+  );
 }
 
 export default FormChoice;
diff --git a/src/components/HasManyFields/HasManyFieldsRow.tsx b/src/components/HasManyFields/HasManyFieldsRow.tsx
index b6456604c..d164d73ec 100644
--- a/src/components/HasManyFields/HasManyFieldsRow.tsx
+++ b/src/components/HasManyFields/HasManyFieldsRow.tsx
@@ -1,7 +1,7 @@
 import { Placement } from '@popperjs/core';
 import classnames from 'classnames';
-import React, { useState } from 'react';
-import { getUniqueId } from '../../util/uniqueId';
+import React from 'react';
+import { useUniqueId } from '../../util/uniqueId';
 import Button from '../Button/Button';
 import ConfirmationButton, { ConfirmationButtonProps } from '../Button/ConfirmationButton';
 import Icon from '../Icon/Icon';
@@ -33,7 +33,7 @@ const HasManyFieldsRow = ({
   deleteProps,
   ...props
 }: HasManyFieldsRowProps) => {
-  const [id] = useState(() => getUniqueId('hmf-', 1));
+  const id = useUniqueId('hmf-', 1);
 
   const classNames = classnames('mb-4 gx-0', className);
   // The `disabled ? <Button> : <ConfirmationButton>` code works around Tooltips not show on `disabled` elements:
diff --git a/src/components/HelpBubble/HelpBubble.tsx b/src/components/HelpBubble/HelpBubble.tsx
index e18d0f26c..0f28256f7 100644
--- a/src/components/HelpBubble/HelpBubble.tsx
+++ b/src/components/HelpBubble/HelpBubble.tsx
@@ -1,5 +1,5 @@
 import React, { useState, SyntheticEvent } from 'react';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
 import Popover from '../Popover/Popover';
@@ -18,7 +18,7 @@ const style = {
 };
 
 function HelpBubble(props: HelpBubbleProps) {
-  const [id] = useState(() => getUniqueId('help-bubble-'));
+  const id = useUniqueId('help-bubble-');
   const [isOpen, setIsOpen] = useState(false);
 
   const toggle = (e: SyntheticEvent) => {
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 8fe0cc0c5..bec47975e 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { ListGroupProps } from 'reactstrap';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import useMap from '../../hooks/useMap';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import Input from '../Input/Input';
 import Col from '../Layout/Col';
 import Row from '../Layout/Row';
@@ -90,7 +90,7 @@ function List<T extends Item>({
     clear: clearSelection,
     replace: replaceSelection,
   } = useMap(selected, selectedKeyMapper);
-  const [selectAllId] = useState(() => getUniqueId('selectall-', 1));
+  const selectAllId = useUniqueId('selectall-', 1);
   const selectAllRef = useRef<HTMLInputElement>(null);
 
   useDeepCompareEffect(() => replaceSelection(selected), [selected, replaceSelection]);
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index d612a2183..8ebf3113b 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import React, { useState } from 'react';
 import { ListGroupItemProps } from 'reactstrap';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import Button from '../Button/Button';
 import Collapse from '../Collapse/Collapse';
 import Icon from '../Icon/Icon';
@@ -42,7 +42,7 @@ function ListItem<T>({
   const isExpandable = onExpand !== undefined;
   const ExpandedItem = isExpandable ? onExpand!(item) : undefined;
   const [expanded, setExpanded] = useState(defaultExpanded);
-  const [id] = useState(() => getUniqueId('listitem-', 1));
+  const id = useUniqueId('listitem-', 1);
 
   const unselectedColor = (expanded && expandedColor) || color;
 
diff --git a/src/components/List/components/FilterHeader.tsx b/src/components/List/components/FilterHeader.tsx
index 47fa794f6..3557e0fd5 100644
--- a/src/components/List/components/FilterHeader.tsx
+++ b/src/components/List/components/FilterHeader.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import React, { useState } from 'react';
-import { getUniqueId } from '../../../util/uniqueId';
+import React from 'react';
+import { useUniqueId } from '../../../util/uniqueId';
 import Input from '../../Input/Input';
 import Label from '../../Label/Label';
 
@@ -10,7 +10,7 @@ export interface FilterHeaderProps
 }
 
 const FilterHeader = ({ value, onChange, className, id, ...props }: FilterHeaderProps) => {
-  const [filterId] = useState(() => getUniqueId('filter-', 1));
+  const filterId = useUniqueId('filter-', 1);
   return (
     <>
       <Label hidden for={filterId}>
diff --git a/src/components/List/components/SortHeader.tsx b/src/components/List/components/SortHeader.tsx
index 806dc0bdb..e2b7fdd38 100644
--- a/src/components/List/components/SortHeader.tsx
+++ b/src/components/List/components/SortHeader.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { getUniqueId } from '../../../util/uniqueId';
+import React from 'react';
+import { useUniqueId } from '../../../util/uniqueId';
 import Button from '../../Button/Button';
 import Icon from '../../Icon/Icon';
 import Input from '../../Input/Input';
@@ -28,7 +28,7 @@ const SortHeader = ({
   onChangeAscending,
   onChangeProperty,
 }: SortHeaderProps) => {
-  const [sortId] = useState(() => getUniqueId('sort-', 1));
+  const sortId = useUniqueId('sort-', 1);
   return (
     <Col
       xs="12"
diff --git a/src/components/Table/SortableTable.js b/src/components/Table/SortableTable.js
index f4840c6f4..d8a2a2ad3 100644
--- a/src/components/Table/SortableTable.js
+++ b/src/components/Table/SortableTable.js
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import React from 'react';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
 import Label from '../Label/Label';
@@ -71,8 +71,8 @@ function defaultRenderRow(
   ];
 }
 
-function getSelectableCell(row, rowSelected, onSelect) {
-  const selectRowId = getUniqueId('select-row-', 1);
+function SelectableCell({ row, rowSelected, onSelect }) {
+  const selectRowId = useUniqueId('select-row-', 1);
   return (
     <>
       <Label for={selectRowId} hidden>
@@ -91,6 +91,25 @@ function getSelectableCell(row, rowSelected, onSelect) {
   );
 }
 
+function SelectAllHeader({ allSelected, onSelectAll }) {
+  const id = useUniqueId('select-all-', 1);
+  return (
+    <>
+      <Label for={id} hidden>
+        Select all rows
+      </Label>
+      <input
+        type="checkbox"
+        className="mx-1"
+        id={id}
+        checked={allSelected}
+        onClick={(e) => e.stopPropagation()}
+        onChange={(e) => onSelectAll(e.target.checked)}
+      />
+    </>
+  );
+}
+
 function getExpandableCell(row, expanded, onExpand) {
   return (
     <Button
@@ -189,26 +208,12 @@ class SortableTable extends React.Component {
     const cols = [...columns];
 
     if (selectable) {
-      const selectAllId = getUniqueId('select-all-', 1);
       cols.unshift({
         align: 'center',
         key: 'select',
-        header: (
-          <>
-            <Label for={selectAllId} hidden>
-              Select all rows
-            </Label>
-            <input
-              type="checkbox"
-              className="mx-1"
-              id={selectAllId}
-              checked={allSelected}
-              onClick={(e) => e.stopPropagation()}
-              onChange={(e) => onSelectAll(e.target.checked)}
-            />
-          </>
-        ),
-        cell: (row) => getSelectableCell(row, rowSelected, onSelect),
+        header: <SelectAllHeader allSelected={allSelected} onSelectAll={onSelectAll} />,
+        // eslint-disable-next-line react/no-unstable-nested-components
+        cell: (row) => <SelectableCell row={row} rowSelected={rowSelected} onSelect={onSelect} />,
         width: '2rem',
       });
     }
diff --git a/src/components/Tooltip/TooltipButton.tsx b/src/components/Tooltip/TooltipButton.tsx
index 39f2c772f..ed35749ab 100644
--- a/src/components/Tooltip/TooltipButton.tsx
+++ b/src/components/Tooltip/TooltipButton.tsx
@@ -1,7 +1,7 @@
 import { Placement } from '@popperjs/core';
 import classnames from 'classnames';
-import React, { FC, useState } from 'react';
-import { getUniqueId } from '../../util/uniqueId';
+import React, { FC } from 'react';
+import { useUniqueId } from '../../util/uniqueId';
 import Button, { ButtonProps } from '../Button/Button';
 import Tooltip from './Tooltip';
 
@@ -19,7 +19,7 @@ const TooltipButton: FC<TooltipButtonProps> = ({
   gearsBtnContainerClass,
   ...props
 }) => {
-  const [buttonId] = useState(() => `tooltip-button-${getUniqueId('tooltip-button-')}`);
+  const buttonId = useUniqueId('tooltip-button-');
   const tooltipId = `tooltip-for-${buttonId}`;
   const className = classnames('d-inline-block', gearsBtnContainerClass);
 
diff --git a/src/components/Tree/TreeItem.tsx b/src/components/Tree/TreeItem.tsx
index 2d82c52e9..a350665d4 100644
--- a/src/components/Tree/TreeItem.tsx
+++ b/src/components/Tree/TreeItem.tsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import React, { useEffect, useRef, useState } from 'react';
-import { getUniqueId } from '../../util/uniqueId';
+import React, { useEffect, useRef } from 'react';
+import { useUniqueId } from '../../util/uniqueId';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
 import Input from '../Input/Input';
@@ -36,7 +36,7 @@ function TreeItem<T>({
   ...props
 }: TreeItemProps<T>) {
   const selectAllRef = useRef<HTMLInputElement>(null);
-  const [checkboxId] = useState(() => getUniqueId('tree-item-'));
+  const checkboxId = useUniqueId('tree-item-');
   const showExpand = option.children && option.children?.length > 0;
 
   useEffect(() => {
diff --git a/src/components/TruncatedText/TruncatedText.tsx b/src/components/TruncatedText/TruncatedText.tsx
index 0b4290696..2fa6af26b 100644
--- a/src/components/TruncatedText/TruncatedText.tsx
+++ b/src/components/TruncatedText/TruncatedText.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { TooltipProps, UncontrolledTooltipProps } from 'reactstrap';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import Tooltip from '../Tooltip/Tooltip';
 
 interface TruncatedTextProps {
@@ -20,7 +20,8 @@ const TruncatedText = ({
   placement = 'top',
   tooltipProps,
 }: TruncatedTextProps) => {
-  const [id] = useState(targetId || (() => getUniqueId('truncated-text-')));
+  const generatedId = useUniqueId('truncated-text-');
+  const id = targetId || generatedId;
   return (
     <>
       <span id={id}>
diff --git a/src/context.tsx b/src/context.tsx
new file mode 100644
index 000000000..f0c46660d
--- /dev/null
+++ b/src/context.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { UniqueIdContext } from './util/uniqueId';
+
+interface GearsContextProviderProps {
+  children: React.ReactNode;
+  uniqueIdCounts: Record<string, number>;
+}
+
+export function GearsContextProvider({ children, uniqueIdCounts }: GearsContextProviderProps) {
+  return <UniqueIdContext.Provider value={uniqueIdCounts}>{children}</UniqueIdContext.Provider>;
+}
diff --git a/src/index.ts b/src/index.ts
index 01c6aa7b5..b59564fcc 100755
--- a/src/index.ts
+++ b/src/index.ts
@@ -93,6 +93,7 @@ export { default as CreditCardNumber } from './components/Input/CreditCardNumber
 export { default as CurrencyInput } from './components/Input/CurrencyInput';
 export { default as DateInput } from './components/Input/DateInput';
 export { default as FileInput } from './components/Input/FileInput';
+export { GearsContextProvider } from './context';
 export { default as Input } from './components/Input/Input';
 export { default as MaskedInput } from './components/Input/MaskedInput';
 export { default as MonthInput } from './components/Input/MonthInput';
diff --git a/src/util/uniqueId.ts b/src/util/uniqueId.ts
deleted file mode 100644
index caa2c7709..000000000
--- a/src/util/uniqueId.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-const idCounts: Record<string, number> = {};
-
-export function getUniqueId(idPrefix: string, startingCount = 0) {
-  if (idCounts[idPrefix] === undefined || idCounts[idPrefix] > Number.MAX_SAFE_INTEGER) {
-    idCounts[idPrefix] = startingCount;
-  }
-  return `${idPrefix}${idCounts[idPrefix]++}`;
-}
diff --git a/src/util/uniqueId.tsx b/src/util/uniqueId.tsx
new file mode 100644
index 000000000..f7cc6d3d4
--- /dev/null
+++ b/src/util/uniqueId.tsx
@@ -0,0 +1,17 @@
+import { createContext, useContext, useRef } from 'react';
+
+const idCounts: Record<string, number> = {};
+
+export const UniqueIdContext = createContext(idCounts);
+
+export function useUniqueId(idPrefix: string, startingCount = 0) {
+  const context = useContext(UniqueIdContext);
+  if (context[idPrefix] === undefined || context[idPrefix] > Number.MAX_SAFE_INTEGER) {
+    context[idPrefix] = startingCount;
+  }
+  const idRef = useRef('');
+  if (!idRef.current) {
+    idRef.current = `${idPrefix}${context[idPrefix]++}`;
+  }
+  return idRef.current;
+}

From fb45217f35f7856437225bd0ec63a4faa4fd1ddd Mon Sep 17 00:00:00 2001
From: JeremyRH <holcomb227@gmail.com>
Date: Fri, 16 Jan 2026 12:39:56 -0800
Subject: [PATCH 2/2] fix: use memo for extracted functional components

---
 src/components/Table/SortableTable.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Table/SortableTable.js b/src/components/Table/SortableTable.js
index d8a2a2ad3..048573b57 100644
--- a/src/components/Table/SortableTable.js
+++ b/src/components/Table/SortableTable.js
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React from 'react';
+import React, { memo } from 'react';
 import { useUniqueId } from '../../util/uniqueId';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
@@ -71,7 +71,7 @@ function defaultRenderRow(
   ];
 }
 
-function SelectableCell({ row, rowSelected, onSelect }) {
+const SelectableCell = memo(({ row, rowSelected, onSelect }) => {
   const selectRowId = useUniqueId('select-row-', 1);
   return (
     <>
@@ -89,9 +89,9 @@ function SelectableCell({ row, rowSelected, onSelect }) {
       />
     </>
   );
-}
+});
 
-function SelectAllHeader({ allSelected, onSelectAll }) {
+const SelectAllHeader = memo(({ allSelected, onSelectAll }) => {
   const id = useUniqueId('select-all-', 1);
   return (
     <>
@@ -108,7 +108,7 @@ function SelectAllHeader({ allSelected, onSelectAll }) {
       />
     </>
   );
-}
+});
 
 function getExpandableCell(row, expanded, onExpand) {
   return (