Prevent duplicate initialisation

Author: colinrotherham

src/components/content-presentation/tabs/Tabs.tsx

@@ -1,9 +1,9 @@
 'use client';
 import classNames from 'classnames';
-import React, { FC, HTMLAttributes, useEffect } from 'react';
+import React, { FC, HTMLAttributes, useEffect, useRef, useState } from 'react';
 import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
 // @ts-expect-error -- No types available
-import TabsJs from 'nhsuk-frontend/packages/components/tabs/tabs';
+import initTabs from 'nhsuk-frontend/packages/components/tabs/tabs';
 
 type TabsProps = HTMLAttributes<HTMLDivElement>;
 
@@ -55,12 +55,25 @@ interface Tabs extends FC<TabsProps> {
 }
 
 const Tabs: Tabs = ({ className, children, ...rest }) => {
+  const moduleRef = useRef<HTMLDivElement>(null);
+  const [isInitialised, setIsInitialised] = useState<boolean>(false);
+
   useEffect(() => {
-    TabsJs();
-  }, []);
+    if (isInitialised || !moduleRef.current?.parentElement) {
+      return;
+    }
+
+    initTabs({ scope: moduleRef.current.parentElement });
+    setIsInitialised(true);
+  }, [isInitialised, moduleRef]);
 
   return (
-    <div className={classNames('nhsuk-tabs', className)} data-module="nhsuk-tabs" {...rest}>
+    <div
+      className={classNames('nhsuk-tabs', className)}
+      data-module="nhsuk-tabs"
+      ref={moduleRef}
+      {...rest}
+    >
       {children}
     </div>
   );

src/components/form-elements/character-count/CharacterCount.tsx

@@ -1,7 +1,7 @@
 'use client';
-import React, { FC, useEffect } from 'react';
+import React, { FC, useEffect, useRef, useState } from 'react';
 // @ts-expect-error -- No types available
-import CharacterCountJs from 'nhsuk-frontend/packages/components/character-count/character-count';
+import initCharacterCounts from 'nhsuk-frontend/packages/components/character-count/character-count';
 import { HTMLAttributesWithData } from '@util/types/NHSUKTypes';
 
 export enum CharacterCountType {
@@ -25,9 +25,17 @@ const CharacterCount: FC<CharacterCountProps> = ({
   thresholdPercent,
   ...rest
 }) => {
+  const moduleRef = useRef<HTMLDivElement>(null);
+  const [isInitialised, setIsInitialised] = useState<boolean>(false);
+
   useEffect(() => {
-    CharacterCountJs();
-  }, []);
+    if (isInitialised || !moduleRef.current?.parentElement) {
+      return;
+    }
+
+    initCharacterCounts({ scope: moduleRef.current.parentElement });
+    setIsInitialised(true);
+  }, [isInitialised, moduleRef]);
 
   const characterCountProps: HTMLAttributesWithData<HTMLDivElement> =
     countType === CharacterCountType.Characters
@@ -42,6 +50,7 @@ const CharacterCount: FC<CharacterCountProps> = ({
     <div
       className="nhsuk-character-count"
       data-module="nhsuk-character-count"
+      ref={moduleRef}
       {...characterCountProps}
     >
       <div className="nhsuk-form-group">{children}</div>

src/components/form-elements/checkboxes/Checkboxes.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { HTMLProps, useEffect } from 'react';
+import React, { HTMLProps, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { FormElementProps } from '@util/types/FormTypes';
 import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
@@ -9,20 +9,28 @@ import Box from './components/Box';
 import Divider from './components/Divider';
 import { generateRandomName } from '@util/RandomID';
 // @ts-expect-error -- No types available
-import CheckboxesJs from 'nhsuk-frontend/packages/components/checkboxes/checkboxes';
+import initCheckboxes from 'nhsuk-frontend/packages/components/checkboxes/checkboxes';
 
 interface CheckboxesProps extends HTMLProps<HTMLDivElement>, FormElementProps {
   idPrefix?: string;
 }
 
 const Checkboxes = ({ children, idPrefix, ...rest }: CheckboxesProps) => {
+  const moduleRef = useRef<HTMLDivElement>(null);
+  const [isInitialised, setIsInitialised] = useState<boolean>(false);
+
   const _boxReferences: string[] = [];
   let _boxCount: number = 0;
   let _boxIds: Record<string, string> = {};
 
   useEffect(() => {
-    CheckboxJs();
-  }, []);
+    if (isInitialised || !moduleRef.current?.parentElement) {
+      return;
+    }
+
+    initCheckboxes({ scope: moduleRef.current.parentElement });
+    setIsInitialised(true);
+  }, [isInitialised, moduleRef]);
 
   const getBoxId = (id: string, reference: string): string => {
     if (reference in _boxIds) {
@@ -65,7 +73,12 @@ const Checkboxes = ({ children, idPrefix, ...rest }: CheckboxesProps) => {
           unleaseReference,
         };
         return (
-          <div className={classNames('nhsuk-checkboxes', className)} id={id} {...restRenderProps}>
+          <div
+            className={classNames('nhsuk-checkboxes', className)}
+            id={id}
+            ref={moduleRef}
+            {...restRenderProps}
+          >
             <CheckboxContext.Provider value={contextValue}>{children}</CheckboxContext.Provider>
           </div>
         );

src/components/navigation/header/Header.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { FC, HTMLProps, useContext, useState, useEffect, useMemo } from 'react';
+import React, { FC, HTMLProps, useContext, useState, useEffect, useMemo, useRef } from 'react';
 import classNames from 'classnames';
 import NHSLogo, { NHSLogoNavProps } from './components/NHSLogo';
 import OrganisationalLogo, { OrganisationalLogoProps } from './components/OrganisationalLogo';
@@ -12,7 +12,7 @@ import { Container } from '@components/layout';
 import Content from './components/Content';
 import TransactionalServiceName from './components/TransactionalServiceName';
 // @ts-expect-error -- No types available
-import HeaderJs from 'nhsuk-frontend/packages/components/header/header';
+import initHeader from 'nhsuk-frontend/packages/components/header/header';
 
 const BaseHeaderLogo: FC<OrganisationalLogoProps & NHSLogoNavProps> = (props) => {
   const { orgName } = useContext<IHeaderContext>(HeaderContext);
@@ -47,14 +47,22 @@ const Header = ({
   white,
   ...rest
 }: HeaderProps) => {
+  const moduleRef = useRef<HTMLElement>(null);
+
   const [hasMenuToggle, setHasMenuToggle] = useState(false);
   const [hasSearch, setHasSearch] = useState(false);
   const [hasServiceName, setHasServiceName] = useState(false);
+  const [isInitialised, setIsInitialised] = useState<boolean>(false);
   const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
-    HeaderJs();
-  }, []);
+    if (isInitialised || !moduleRef.current?.parentElement) {
+      return;
+    }
+
+    initHeader({ scope: moduleRef.current.parentElement });
+    setIsInitialised(true);
+  }, [isInitialised, moduleRef]);
 
   const setMenuToggle = (toggle: boolean): void => {
     setHasMenuToggle(toggle);
@@ -114,6 +122,7 @@ const Header = ({
         className,
       )}
       role={role}
+      ref={moduleRef}
       {...rest}
     >
       <HeaderContext.Provider value={contextValue}>{children}</HeaderContext.Provider>