Add support for React strict mode

colinrotherham · colinrotherham · commit 4f2a011765af · 2025-10-27T11:23:27.000Z
diff --git a/src/components/content-presentation/notification-banner/NotificationBanner.tsx b/src/components/content-presentation/notification-banner/NotificationBanner.tsx
@@ -2,9 +2,10 @@
 
 import {
   Children,
-  createRef,
   forwardRef,
   useEffect,
+  useImperativeHandle,
+  useRef,
   useState,
   type ComponentPropsWithoutRef,
 } from 'react';
@@ -27,19 +28,22 @@ const NotificationBannerComponent = forwardRef<HTMLDivElement, NotificationBanne
   (props, forwardedRef) => {
     const { children, className, title, titleId, success, role, disableAutoFocus, ...rest } = props;
 
-    const [moduleRef] = useState(() => forwardedRef || createRef<HTMLDivElement>());
+    const moduleRef = useRef<HTMLDivElement>(null);
+    const importRef = useRef<Promise<NotificationBannerModule | void>>(null);
     const [instanceError, setInstanceError] = useState<Error>();
     const [instance, setInstance] = useState<NotificationBannerModule>();
 
+    useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
+
     useEffect(() => {
-      if (!('current' in moduleRef) || !moduleRef.current || instance) {
+      if (!moduleRef.current || importRef.current || instance) {
         return;
       }
 
-      import('nhsuk-frontend')
+      importRef.current = import('nhsuk-frontend')
         .then(({ NotificationBanner }) => setInstance(new NotificationBanner(moduleRef.current)))
         .catch(setInstanceError);
-    }, [moduleRef, instance]);
+    }, [moduleRef, importRef, instance]);
 
     const items = Children.toArray(children);
 
diff --git a/src/components/content-presentation/table/components/__tests__/TableCell.test.tsx b/src/components/content-presentation/table/components/__tests__/TableCell.test.tsx
@@ -29,7 +29,7 @@ describe('Table.Cell', () => {
       </table>,
     );
 
-    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalled();
     expect(console.warn).toHaveBeenLastCalledWith(
       'Table.Cell used outside of a Table.Head or Table.Body component. Unable to determine section type from context.',
     );
diff --git a/src/components/content-presentation/tabs/Tabs.tsx b/src/components/content-presentation/tabs/Tabs.tsx
@@ -3,9 +3,10 @@
 import classNames from 'classnames';
 import { type Tabs as TabsModule } from 'nhsuk-frontend';
 import {
-  createRef,
   forwardRef,
   useEffect,
+  useImperativeHandle,
+  useRef,
   useState,
   type ComponentPropsWithoutRef,
   type FC,
@@ -55,19 +56,22 @@ export const TabsContents: FC<TabsContentsProps> = ({ children, id, ...rest }) =
 const TabsComponent = forwardRef<HTMLDivElement, TabsProps>((props, forwardedRef) => {
   const { children, className, ...rest } = props;
 
-  const [moduleRef] = useState(() => forwardedRef || createRef<HTMLDivElement>());
+  const moduleRef = useRef<HTMLDivElement>(null);
+  const importRef = useRef<Promise<TabsModule | void>>(null);
   const [instanceError, setInstanceError] = useState<Error>();
   const [instance, setInstance] = useState<TabsModule>();
 
+  useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
+
   useEffect(() => {
-    if (!('current' in moduleRef) || !moduleRef.current || instance) {
+    if (!moduleRef.current || importRef.current || instance) {
       return;
     }
 
-    import('nhsuk-frontend')
+    importRef.current = import('nhsuk-frontend')
       .then(({ Tabs }) => setInstance(new Tabs(moduleRef.current)))
       .catch(setInstanceError);
-  }, [moduleRef, instance]);
+  }, [moduleRef, importRef, instance]);
 
   if (instanceError) {
     throw instanceError;
diff --git a/src/components/form-elements/button/Button.tsx b/src/components/form-elements/button/Button.tsx
@@ -3,9 +3,10 @@
 import classNames from 'classnames';
 import { type Button as ButtonModule } from 'nhsuk-frontend';
 import {
-  createRef,
   forwardRef,
   useEffect,
+  useImperativeHandle,
+  useRef,
   useState,
   type ForwardedRef,
   type MouseEvent,
@@ -45,19 +46,22 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwa
     ...rest
   } = props;
 
-  const [moduleRef] = useState(() => forwardedRef || createRef<HTMLButtonElement>());
+  const moduleRef = useRef<HTMLButtonElement>(null);
+  const importRef = useRef<Promise<ButtonModule | void>>(null);
   const [instanceError, setInstanceError] = useState<Error>();
   const [instance, setInstance] = useState<ButtonModule>();
 
+  useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
+
   useEffect(() => {
-    if (!('current' in moduleRef) || !moduleRef.current || instance) {
+    if (!moduleRef.current || importRef.current || instance) {
       return;
     }
 
-    import('nhsuk-frontend')
+    importRef.current = import('nhsuk-frontend')
       .then(({ Button }) => setInstance(new Button(moduleRef.current)))
       .catch(setInstanceError);
-  }, [moduleRef, instance]);
+  }, [moduleRef, importRef, instance]);
 
   if (instanceError) {
     throw instanceError;
@@ -104,19 +108,22 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       ...rest
     } = props;
 
-    const [moduleRef] = useState(() => forwardedRef || createRef<HTMLAnchorElement>());
+    const moduleRef = useRef<HTMLAnchorElement>(null);
+    const importRef = useRef<Promise<ButtonModule | void>>(null);
     const [instanceError, setInstanceError] = useState<Error>();
     const [instance, setInstance] = useState<ButtonModule>();
 
+    useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
+
     useEffect(() => {
-      if (!('current' in moduleRef) || !moduleRef.current || instance) {
+      if (!moduleRef.current || importRef.current || instance) {
         return;
       }
 
-      import('nhsuk-frontend')
+      importRef.current = import('nhsuk-frontend')
         .then(({ Button }) => setInstance(new Button(moduleRef.current)))
         .catch(setInstanceError);
-    }, [moduleRef, instance]);
+    }, [moduleRef, importRef, instance]);
 
     if (instanceError) {
       throw instanceError;
diff --git a/src/components/form-elements/character-count/CharacterCount.tsx b/src/components/form-elements/character-count/CharacterCount.tsx
@@ -2,7 +2,14 @@
 
 import classNames from 'classnames';
 import { type CharacterCount as CharacterCountModule } from 'nhsuk-frontend';
-import { createRef, forwardRef, useEffect, useState, type ComponentPropsWithoutRef } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from 'react';
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
@@ -16,19 +23,22 @@ export interface CharacterCountProps
 
 export const CharacterCount = forwardRef<HTMLTextAreaElement, CharacterCountProps>(
   ({ maxLength, maxWords, threshold, formGroupProps, ...rest }, forwardedRef) => {
-    const [moduleRef] = useState(() => formGroupProps?.ref || createRef<HTMLDivElement>());
+    const moduleRef = useRef<HTMLDivElement>(null);
+    const importRef = useRef<Promise<CharacterCountModule | void>>(null);
     const [instanceError, setInstanceError] = useState<Error>();
     const [instance, setInstance] = useState<CharacterCountModule>();
 
+    useImperativeHandle(formGroupProps?.ref, () => moduleRef.current!, [moduleRef]);
+
     useEffect(() => {
-      if (!('current' in moduleRef) || !moduleRef.current || instance) {
+      if (!moduleRef.current || importRef.current || instance) {
         return;
       }
 
-      import('nhsuk-frontend')
+      importRef.current = import('nhsuk-frontend')
         .then(({ CharacterCount }) => setInstance(new CharacterCount(moduleRef.current)))
         .catch(setInstanceError);
-    }, [moduleRef, instance]);
+    }, [moduleRef, importRef, instance]);
 
     if (instanceError) {
       throw instanceError;
diff --git a/src/components/form-elements/checkboxes/Checkboxes.tsx b/src/components/form-elements/checkboxes/Checkboxes.tsx
@@ -2,7 +2,14 @@
 
 import classNames from 'classnames';
 import { type Checkboxes as CheckboxesModule } from 'nhsuk-frontend';
-import { createRef, forwardRef, useEffect, useState, type ComponentPropsWithoutRef } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from 'react';
 import { CheckboxesDivider, CheckboxesItem } from './components/index.js';
 import { CheckboxesContext, type ICheckboxesContext } from './CheckboxesContext.js';
 import { FormGroup } from '#components/utils/index.js';
@@ -19,23 +26,26 @@ export interface CheckboxesProps
 const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props, forwardedRef) => {
   const { children, idPrefix, ...rest } = props;
 
-  const [moduleRef] = useState(() => forwardedRef || createRef<HTMLDivElement>());
+  const moduleRef = useRef<HTMLDivElement>(null);
+  const importRef = useRef<Promise<CheckboxesModule | void>>(null);
   const [instanceError, setInstanceError] = useState<Error>();
   const [instance, setInstance] = useState<CheckboxesModule>();
 
   const _boxReferences: string[] = [];
   let _boxCount: number = 0;
   let _boxIds: Record<string, string> = {};
 
+  useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
+
   useEffect(() => {
-    if (!('current' in moduleRef) || !moduleRef.current || instance) {
+    if (!moduleRef.current || importRef.current || instance) {
       return;
     }
 
-    import('nhsuk-frontend')
+    importRef.current = import('nhsuk-frontend')
       .then(({ Checkboxes }) => setInstance(new Checkboxes(moduleRef.current)))
       .catch(setInstanceError);
-  }, [moduleRef, instance]);
+  }, [moduleRef, importRef, instance]);
 
   const getBoxId = (id: string, reference: string): string => {
     if (reference in _boxIds) {
diff --git a/src/components/form-elements/date-input/DateInput.tsx b/src/components/form-elements/date-input/DateInput.tsx
@@ -2,8 +2,9 @@
 
 import classNames from 'classnames';
 import {
-  createRef,
   forwardRef,
+  useImperativeHandle,
+  useRef,
   useState,
   type ChangeEvent,
   type ComponentPropsWithoutRef,
@@ -43,7 +44,9 @@ export type DateInputType = 'day' | 'month' | 'year';
 
 const DateInputComponent = forwardRef<HTMLDivElement, DateInputProps>(
   ({ children, onChange, value, defaultValue, formGroupProps, ...rest }, forwardedRef) => {
-    const [moduleRef] = useState(() => formGroupProps?.ref || createRef<HTMLDivElement>());
+    const moduleRef = useRef<HTMLDivElement>(null);
+
+    useImperativeHandle(formGroupProps?.ref, () => moduleRef.current!, [moduleRef]);
 
     const [internalDate, setInternalDate] = useState<DateInputValue>({
       day: value?.day ?? '',
diff --git a/src/components/form-elements/error-summary/ErrorSummary.tsx b/src/components/form-elements/error-summary/ErrorSummary.tsx
@@ -4,9 +4,10 @@ import classNames from 'classnames';
 import { type ErrorSummary as ErrorSummaryModule } from 'nhsuk-frontend';
 import {
   Children,
-  createRef,
   forwardRef,
   useEffect,
+  useImperativeHandle,
+  useRef,
   useState,
   type ComponentPropsWithoutRef,
 } from 'react';
@@ -19,19 +20,22 @@ export interface ErrorSummaryProps extends ComponentPropsWithoutRef<'div'> {
 
 const ErrorSummaryComponent = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   ({ children, className, disableAutoFocus, ...rest }, forwardedRef) => {
-    const [moduleRef] = useState(() => forwardedRef || createRef<HTMLDivElement>());
+    const moduleRef = useRef<HTMLDivElement>(null);
+    const importRef = useRef<Promise<ErrorSummaryModule | void>>(null);
     const [instanceError, setInstanceError] = useState<Error>();
     const [instance, setInstance] = useState<ErrorSummaryModule>();
 
+    useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
+
     useEffect(() => {
-      if (!('current' in moduleRef) || !moduleRef.current || instance) {
+      if (!moduleRef.current || importRef.current || instance) {
         return;
       }
 
-      import('nhsuk-frontend')
+      importRef.current = import('nhsuk-frontend')
         .then(({ ErrorSummary }) => setInstance(new ErrorSummary(moduleRef.current)))
         .catch(setInstanceError);
-    }, [moduleRef, instance]);
+    }, [moduleRef, importRef, instance]);
 
     const items = Children.toArray(children);
 
diff --git a/src/components/form-elements/radios/Radios.tsx b/src/components/form-elements/radios/Radios.tsx
@@ -2,7 +2,14 @@
 
 import classNames from 'classnames';
 import { type Radios as RadiosModule } from 'nhsuk-frontend';
-import { createRef, forwardRef, useEffect, useState, type ComponentPropsWithoutRef } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from 'react';
 import { RadiosDivider, RadiosItem } from './components/index.js';
 import { RadiosContext, type IRadiosContext } from './RadiosContext.js';
 import { FormGroup } from '#components/utils/index.js';
@@ -20,7 +27,8 @@ export interface RadiosProps
 const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwardedRef) => {
   const { children, idPrefix, ...rest } = props;
 
-  const [moduleRef] = useState(() => forwardedRef || createRef<HTMLDivElement>());
+  const moduleRef = useRef<HTMLDivElement>(null);
+  const importRef = useRef<Promise<RadiosModule | void>>(null);
   const [instanceError, setInstanceError] = useState<Error>();
   const [instance, setInstance] = useState<RadiosModule>();
   const [selectedRadio, setSelectedRadio] = useState<string>();
@@ -29,15 +37,17 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
   let _radioCount = 0;
   let _radioIds: Record<string, string> = {};
 
+  useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
+
   useEffect(() => {
-    if (!('current' in moduleRef) || !moduleRef.current || instance) {
+    if (!moduleRef.current || importRef.current || instance) {
       return;
     }
 
-    import('nhsuk-frontend')
+    importRef.current = import('nhsuk-frontend')
       .then(({ Radios }) => setInstance(new Radios(moduleRef.current)))
       .catch(setInstanceError);
-  }, [moduleRef, instance]);
+  }, [moduleRef, importRef, instance]);
 
   const getRadioId = (id: string, reference: string): string => {
     if (reference in _radioIds) {
diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx
@@ -4,10 +4,11 @@ import classNames from 'classnames';
 import { type Header as HeaderModule } from 'nhsuk-frontend';
 import {
   Children,
-  createRef,
   forwardRef,
   useEffect,
+  useImperativeHandle,
   useMemo,
+  useRef,
   useState,
   type ComponentPropsWithoutRef,
 } from 'react';
@@ -34,13 +35,16 @@ const HeaderComponent = forwardRef<HTMLElement, HeaderProps>((props, forwardedRe
   const { className, containerClasses, children, logo, service, organisation, white, ...rest } =
     props;
 
-  const [moduleRef] = useState(() => forwardedRef || createRef<HTMLElement>());
+  const moduleRef = useRef<HTMLElement>(null);
+  const importRef = useRef<Promise<HeaderModule | void>>(null);
   const [instanceError, setInstanceError] = useState<Error>();
   const [instance, setInstance] = useState<HeaderModule>();
   const [menuOpen, setMenuOpen] = useState(false);
 
+  useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
+
   useEffect(() => {
-    if (!('current' in moduleRef) || !moduleRef.current || instance) {
+    if (!moduleRef.current || importRef.current || instance) {
       if (!instance) {
         return;
       }
@@ -58,10 +62,10 @@ const HeaderComponent = forwardRef<HTMLElement, HeaderProps>((props, forwardedRe
       return;
     }
 
-    import('nhsuk-frontend')
+    importRef.current = import('nhsuk-frontend')
       .then(({ Header }) => setInstance(new Header(moduleRef.current)))
       .catch(setInstanceError);
-  }, [moduleRef, instance, menuOpen]);
+  }, [moduleRef, importRef, instance, menuOpen]);
 
   const contextValue: IHeaderContext = useMemo(() => {
     return { menuOpen, setMenuOpen };
diff --git a/src/components/navigation/skip-link/SkipLink.tsx b/src/components/navigation/skip-link/SkipLink.tsx
diff --git a/src/components/utils/__tests__/HeadingLevel.test.tsx b/src/components/utils/__tests__/HeadingLevel.test.tsx
