diff --git a/UNRELEASED.md b/UNRELEASED.md index a5142852b06..b76db000855 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -25,6 +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)) +- Added `useUniqueId` hook that can be used to get a unique id that remains consistent between rerenders and updated components to use it where appropriate ([#2079](https://github.com/Shopify/polaris-react/pull/2079)) ### Deprecations diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx index b32983db242..2d68ba99825 100644 --- a/src/components/RadioButton/RadioButton.tsx +++ b/src/components/RadioButton/RadioButton.tsx @@ -42,12 +42,12 @@ export function RadioButton({ onChange, onFocus, onBlur, - id: providedId, - name: providedName, + id: idProp, + name: nameProp, value, }: RadioButtonProps) { - const id = useUniqueId('RadioButton', providedId); - const name = providedName || id; + const id = useUniqueId('RadioButton', idProp); + const name = nameProp || id; function handleChange({currentTarget}: React.ChangeEvent) { onChange && onChange(currentTarget.checked, id); diff --git a/src/utilities/unique-id/hooks.ts b/src/utilities/unique-id/hooks.ts index 481f852a3d2..1962128dc9f 100644 --- a/src/utilities/unique-id/hooks.ts +++ b/src/utilities/unique-id/hooks.ts @@ -14,8 +14,7 @@ export function useUniqueId(prefix = '', override?: string) { // 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 + // On subsequent renders we use the existing value instead of using a new id const currentComponentIdRef = useRef(null); if (!currentComponentIdRef.current) {