From b3202ef67c233bd9b69cde0403e621621a43989e Mon Sep 17 00:00:00 2001
From: Alex Sanders <alex@sndrs.dev>
Date: Fri, 24 May 2024 11:58:52 +0100
Subject: [PATCH] use react's `useId` in place of `generateSourceId`

it does not change when the component is rerendered
---
 src/client/components/CheckboxInput.tsx     | 5 ++---
 src/client/components/ToggleSwitchInput.tsx | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/client/components/CheckboxInput.tsx b/src/client/components/CheckboxInput.tsx
index 852ea6e8b..e7a187097 100644
--- a/src/client/components/CheckboxInput.tsx
+++ b/src/client/components/CheckboxInput.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useId } from 'react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { Checkbox } from '@guardian/source-react-components';
 import { SerializedStyles, css } from '@emotion/react';
@@ -6,7 +6,6 @@ import {
 	textSans,
 	focusHalo,
 	descriptionId,
-	generateSourceId,
 	space,
 	palette,
 	textSans12,
@@ -126,7 +125,7 @@ export const CheckboxInput = ({
 	cssOverrides,
 	onToggle,
 }: CheckboxInputProps): EmotionJSX.Element => {
-	const switchName = id ?? generateSourceId();
+	const switchName = id ?? useId();
 	const labelId = descriptionId(switchName);
 
 	return (
diff --git a/src/client/components/ToggleSwitchInput.tsx b/src/client/components/ToggleSwitchInput.tsx
index f180c2d5f..4b9f5e486 100644
--- a/src/client/components/ToggleSwitchInput.tsx
+++ b/src/client/components/ToggleSwitchInput.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useId } from 'react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import type { Props } from '@guardian/source-react-components';
 import { css } from '@emotion/react';
@@ -9,7 +9,6 @@ import {
 	focusHalo,
 	visuallyHidden,
 	descriptionId,
-	generateSourceId,
 	space,
 } from '@guardian/source-foundations';
 
@@ -174,7 +173,7 @@ export const ToggleSwitchInput = ({
 	imagePath,
 	cssOverrides,
 }: ToggleSwitchInputProps): EmotionJSX.Element => {
-	const switchName = id ?? generateSourceId();
+	const switchName = id ?? useId();
 	const labelId = descriptionId(switchName);
 
 	return (