Fix missing React hook dependencies

Author: colinrotherham

src/components/content-presentation/table/Table.tsx

@@ -45,7 +45,7 @@ const TableComponent = forwardRef<HTMLTableElement, TableProps>((props, forwarde
       responsive,
       setHeadings,
     };
-  }, [responsive, headings, setHeadings]);
+  }, [firstCellIsHeader, headings, responsive, setHeadings]);
 
   return (
     <TableContext.Provider value={contextValue}>

src/components/content-presentation/table/components/TableRow.tsx

@@ -18,7 +18,7 @@ export const TableRow: FC<ComponentPropsWithoutRef<'tr'>> = ({ children, classNa
     if (responsive && section === TableSection.HEAD) {
       setHeadings(getHeadingsFromChildren(children));
     }
-  }, [responsive, section, children]);
+  }, [children, responsive, section, setHeadings]);
 
   const tableCells = Children.map(children, (child, index) => {
     return section === TableSection.BODY && isTableCell(child)

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

@@ -41,15 +41,15 @@ export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
     const { getBoxId, name, leaseReference, unleaseReference } =
       useContext<ICheckboxesContext>(CheckboxesContext);
 
-    const [boxReference] = useState<string>(leaseReference());
-    const inputID = id || getBoxId(boxReference);
+    const [checkboxReference] = useState<string>(leaseReference());
+    const inputID = id || getBoxId(checkboxReference);
     const shouldShowConditional = !!(checked || defaultChecked);
 
     const { className: labelClassName, ...restLabelProps } = labelProps || {};
     const { className: hintClassName, ...restHintProps } = hintProps || {};
     const { className: conditionalClassName, ...restConditionalProps } = conditionalProps || {};
 
-    useEffect(() => () => unleaseReference(boxReference), []);
+    useEffect(() => () => unleaseReference(checkboxReference));
 
     const inputProps: HTMLAttributesWithData<HTMLInputElement> = rest;
 

src/components/form-elements/date-input/DateInput.tsx

@@ -51,14 +51,24 @@ const DateInputComponent = forwardRef<HTMLDivElement, DateInputProps>(
     });
 
     useEffect(() => {
-      const newState = { ...internalDate };
-      const { day, month, year } = value ?? {};
-      if (day && day !== internalDate.day) newState.day = day;
-      if (month && month !== internalDate.month) newState.month = month;
-      if (year && year !== internalDate.year) newState.year = year;
-
-      return setInternalDate(newState);
-    }, [value]);
+      if (!value) {
+        return;
+      }
+
+      if (
+        value.day === internalDate.day &&
+        value.month === internalDate.month &&
+        value.year === internalDate.year
+      ) {
+        return;
+      }
+
+      return setInternalDate({
+        day: value.day ?? internalDate.day,
+        month: value.month ?? internalDate.month,
+        year: value.year ?? internalDate.year,
+      });
+    }, [internalDate, value]);
 
     const handleChange = (inputType: InputType, event: ChangeEvent<HTMLInputElement>): void => {
       event.stopPropagation();

src/components/form-elements/radios/components/Item.tsx

@@ -47,11 +47,11 @@ export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props,
 
   useEffect(() => {
     if (defaultChecked) setSelected(radioReference);
-  }, []);
+  }, [defaultChecked, setSelected, radioReference]);
 
   useEffect(() => {
     if (checked) setSelected(radioReference);
-  }, [checked]);
+  }, [checked, setSelected, radioReference]);
 
   return (
     <>

src/components/navigation/header/Header.tsx

@@ -106,7 +106,7 @@ const HeaderComponent = forwardRef<HTMLElement, HeaderProps>((props, forwardedRe
       setServiceProps,
       setOrganisationProps,
     };
-  }, [logoProps, serviceProps, organisationProps]);
+  }, [logoProps, serviceProps, organisationProps, menuOpen]);
 
   const items = Children.toArray(children);
   const childLogo = items.find((child) => childIsOfComponentType(child, Logo));

src/components/navigation/header/components/Logo.tsx

@@ -14,7 +14,7 @@ export const Logo: FC<LogoProps> = (logo) => {
 
     setLogoProps(logo);
     return () => setLogoProps(undefined);
-  }, [logo]);
+  }, [logo, setLogoProps]);
 
   const { alt = 'NHS' } = logo;
 

src/components/navigation/header/components/Navigation.tsx

@@ -26,7 +26,7 @@ export const Navigation: FC<NavigationProps> = ({
 
     setMenuOpen(open);
     return () => setMenuOpen(false);
-  }, [open]);
+  }, [open, setMenuOpen]);
 
   return (
     <nav

src/components/utils/FormGroup.tsx

@@ -104,12 +104,12 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
   useEffect(() => {
     passError(elementID, disableErrorFromComponents ? false : Boolean(error));
     return () => passError(elementID, false);
-  }, [elementID, error]);
+  }, [disableErrorFromComponents, elementID, error, passError]);
 
   useEffect(() => {
     registerComponent(elementID);
     return () => registerComponent(elementID, true);
-  }, []);
+  }, [elementID, registerComponent]);
 
   return (
     <div

src/util/hooks/UseDevWarning.tsx

@@ -9,5 +9,5 @@ export const useDevWarning = (warning: string, condition: ConditionFn = () => tr
       // eslint-disable-next-line no-console
       console.warn(warning);
     }
-  }, [warning]);
+  }, [warning, condition]);
 };