Replace Custom Id Generation with React Built-in useId
Summary
We currently use a custom generateUniqueId function (wrapper around lodash's uniqueId('ot-')) to generate unique element IDs in components. Because it is called directly in render function bodies without any memoization, a new ID is produced on every re-render.
React ships since v18 the useId hook specifically for this use case. It returns a stable, unique ID that is consistent across re-renders. We should replace all component-level usages of generateUniqueId with useId.
Affected files
- DateTimePicker.tsx
- DashboardDateTimePicker.tsx
- CreateRoomsForm.tsx
- Drawer.tsx
- VotesAndPollsResultsPopover.tsx
- CommonFormItem.tsx
- CommonTextField.tsx
- TalkingStickUnmutedNotification.tsx
- TalkingStickMutedNotification.tsx
Acceptance Criteria
-
all usages of
generateUniqueIdare replaced withuseId -
generateUniqueIdis removed - no visual or functional regressions