chore(deps): update dependency eslint-plugin-react-hooks to v6 (#3774)

* chore(deps): update dependency eslint-plugin-react-hooks to v6

* Getting rid of this undefined class reference

* Migrating to new flat/recommended

* Renaming our own polyfill useEffectEvent(), since the official one is arriving in React 19.2 and now has eslint rules that break for us

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Ole Martin Handeland <[email protected]>

Author: renovate[bot]

eslint.config.mjs

@@ -6,6 +6,7 @@ import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';
 import preferredImportPath from 'eslint-plugin-preferred-import-path';
 import reactPlugin from 'eslint-plugin-react';
 import reactCompiler from 'eslint-plugin-react-compiler';
+import reactHooks from 'eslint-plugin-react-hooks';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import sonarjs from 'eslint-plugin-sonarjs';
 import testingLibrary from 'eslint-plugin-testing-library';
@@ -37,10 +38,10 @@ export default tseslint.config(
       'plugin:import/typescript',
       'plugin:jsx-a11y/recommended',
       'plugin:react/recommended',
-      'plugin:react-hooks/recommended',
       'plugin:prettier/recommended',
     ),
   ),
+  reactHooks.configs['flat/recommended'],
   {
     ignores: [
       '**/node_modules',

package.json

@@ -92,7 +92,7 @@
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
-    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-react-hooks": "6.1.1",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "eslint-plugin-sonarjs": "3.0.5",
     "eslint-plugin-testing-library": "7.11.0",

src/features/payment/PaymentProvider.tsx

@@ -10,8 +10,8 @@ import { PaymentStatus } from 'src/features/payment/types';
 import { usePerformPayActionMutation } from 'src/features/payment/usePerformPaymentMutation';
 import { useIsPayment } from 'src/features/payment/utils';
 import { useNavigationParam } from 'src/hooks/navigation';
-import { useEffectEvent } from 'src/hooks/useEffectEvent';
 import { useIsPdf } from 'src/hooks/useIsPdf';
+import { useOurEffectEvent } from 'src/hooks/useOurEffectEvent';
 import { useShallowMemo } from 'src/hooks/useShallowMemo';
 
 type PaymentContextProps = {
@@ -38,8 +38,8 @@ export const PaymentProvider: React.FC<PaymentContextProvider> = ({ children })
 
   const isLoading = isPaymentPending || isConfirmPending;
 
-  const performPayment = useEffectEvent(() => mutateAsync());
-  const skipPayment = useEffectEvent(() => processConfirm());
+  const performPayment = useOurEffectEvent(() => mutateAsync());
+  const skipPayment = useOurEffectEvent(() => processConfirm());
 
   const contextValue = useShallowMemo({ performPayment, skipPayment, paymentError });
 

src/features/validation/callbacks/onFormSubmitValidation.ts

@@ -4,7 +4,7 @@ import { ValidationMask } from '..';
 
 import { ContextNotProvided } from 'src/core/contexts/context';
 import { Validation } from 'src/features/validation/validationContext';
-import { useEffectEvent } from 'src/hooks/useEffectEvent';
+import { useOurEffectEvent } from 'src/hooks/useOurEffectEvent';
 import { NodesInternal } from 'src/utils/layout/NodesContext';
 
 /**
@@ -20,7 +20,7 @@ export function useOnFormSubmitValidation() {
   const setNodeVisibility = NodesInternal.useLaxSetNodeVisibility();
   const getNodesWithErrors = NodesInternal.useGetNodesWithErrors();
 
-  const callback = useEffectEvent((includeNonIncrementalValidations: boolean): boolean => {
+  const callback = useOurEffectEvent((includeNonIncrementalValidations: boolean): boolean => {
     if (validation.current === ContextNotProvided || setNodeVisibility === ContextNotProvided) {
       // If the validation context or nodes context is not provided, we cannot validate
       return false;

src/features/validation/callbacks/onGroupCloseValidation.ts

@@ -2,7 +2,7 @@ import { useLayoutLookups } from 'src/features/form/layout/LayoutsContext';
 import { getVisibilityMask } from 'src/features/validation/utils';
 import { Validation } from 'src/features/validation/validationContext';
 import { getRecursiveValidations, makeComponentIdIndex } from 'src/features/validation/ValidationStorePlugin';
-import { useEffectEvent } from 'src/hooks/useEffectEvent';
+import { useOurEffectEvent } from 'src/hooks/useOurEffectEvent';
 import { useComponentIdMutator } from 'src/utils/layout/DataModelLocation';
 import { NodesInternal } from 'src/utils/layout/NodesContext';
 import type { NodeRefValidation } from 'src/features/validation';
@@ -20,7 +20,7 @@ export function useOnGroupCloseValidation() {
   const idMutator = useComponentIdMutator(true);
 
   /* Ensures the callback will have the latest state */
-  const callback = useEffectEvent(
+  const callback = useOurEffectEvent(
     (baseComponentId: string, restriction: number | undefined, masks: AllowedValidationMasks): boolean => {
       const mask = getVisibilityMask(masks);
       const state = nodeStore.getState();

src/features/validation/callbacks/onPageNavigationValidation.ts

@@ -3,8 +3,8 @@ import { useCallback } from 'react';
 import { useRefetchInitialValidations } from 'src/features/validation/backendValidation/backendValidationQuery';
 import { getVisibilityMask } from 'src/features/validation/utils';
 import { Validation } from 'src/features/validation/validationContext';
-import { useEffectEvent } from 'src/hooks/useEffectEvent';
 import { usePageOrder } from 'src/hooks/useNavigatePage';
+import { useOurEffectEvent } from 'src/hooks/useOurEffectEvent';
 import { NodesInternal } from 'src/utils/layout/NodesContext';
 import type { PageValidation } from 'src/layout/common.generated';
 
@@ -22,7 +22,7 @@ export function useOnPageNavigationValidation() {
   const refetchInitialValidations = useRefetchInitialValidations();
 
   /* Ensures the callback will have the latest state */
-  const callback = useEffectEvent(async (currentPage: string, config: PageValidation): Promise<boolean> => {
+  const callback = useOurEffectEvent(async (currentPage: string, config: PageValidation): Promise<boolean> => {
     const pageConfig = config.page ?? 'current';
     const masks = config.show;
     const mask = getVisibilityMask(masks);

src/hooks/useEffectEvent.ts renamed to src/hooks/useOurEffectEvent.ts

@@ -6,7 +6,7 @@ import { useCallback, useInsertionEffect, useRef } from 'react';
  * @see https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useEffectEvent<T extends (...args: any[]) => any>(event: T) {
+export function useOurEffectEvent<T extends (...args: any[]) => any>(event: T) {
   const ref = useRef(event);
   useInsertionEffect(() => {
     ref.current = event;

src/layout/Address/AddressComponent.tsx

@@ -15,7 +15,7 @@ import { useBindingValidationsFor } from 'src/features/validation/selectors/bind
 import { useComponentValidationsFor } from 'src/features/validation/selectors/componentValidationsForNode';
 import { hasValidationErrors } from 'src/features/validation/utils';
 import { usePostPlaceQuery } from 'src/hooks/queries/usePostPlaceQuery';
-import { useEffectEvent } from 'src/hooks/useEffectEvent';
+import { useOurEffectEvent } from 'src/hooks/useOurEffectEvent';
 import classes from 'src/layout/Address/AddressComponent.module.css';
 import { useItemWhenType } from 'src/utils/layout/useNodeItem';
 import type { PropsFromGenericComponent } from 'src/layout';
@@ -48,7 +48,7 @@ export function AddressComponent({ baseComponentId }: PropsFromGenericComponent<
   const debounce = FD.useDebounceImmediately();
   const { address, careOf, postPlace, zipCode, houseNumber } = formData;
 
-  const updatePostPlace = useEffectEvent((newPostPlace) => {
+  const updatePostPlace = useOurEffectEvent((newPostPlace) => {
     if (newPostPlace != null && newPostPlace != postPlace) {
       setValue('postPlace', newPostPlace);
     }

src/layout/List/ListComponent.tsx

@@ -298,7 +298,6 @@ export const ListComponent = ({ baseComponentId }: PropsFromGenericComponent<'Li
             <Table.Row
               key={JSON.stringify(row)}
               onClick={!readOnly ? () => handleRowClick(row) : undefined}
-              className={cn({ [classes.readOnlyRow]: readOnly })}
             >
               {!readOnly && (
                 <Table.Cell

yarn.lock

@@ -5649,7 +5649,7 @@ __metadata:
     eslint-plugin-prettier: "npm:5.5.4"
     eslint-plugin-react: "npm:7.37.5"
     eslint-plugin-react-compiler: "npm:19.1.0-rc.2"
-    eslint-plugin-react-hooks: "npm:5.2.0"
+    eslint-plugin-react-hooks: "npm:6.1.1"
     eslint-plugin-simple-import-sort: "npm:12.1.1"
     eslint-plugin-sonarjs: "npm:3.0.5"
     eslint-plugin-testing-library: "npm:7.11.0"
@@ -9057,12 +9057,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react-hooks@npm:5.2.0":
-  version: 5.2.0
-  resolution: "eslint-plugin-react-hooks@npm:5.2.0"
+"eslint-plugin-react-hooks@npm:6.1.1":
+  version: 6.1.1
+  resolution: "eslint-plugin-react-hooks@npm:6.1.1"
+  dependencies:
+    "@babel/core": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    zod: "npm:^3.22.4 || ^4.0.0"
+    zod-validation-error: "npm:^3.0.3 || ^4.0.0"
   peerDependencies:
     eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
-  checksum: 10c0/1c8d50fa5984c6dea32470651807d2922cc3934cf3425e78f84a24c2dfd972e7f019bee84aefb27e0cf2c13fea0ac1d4473267727408feeb1c56333ca1489385
+  checksum: 10c0/579be053bc89c995a6c03996f9ee3f6bac88946b4b1c8b891b42f981e7c05a9c5de46324bbd2a33199855c0a602820c0e3eeb7f840730301b77a9ba3dc7a0ae2
   languageName: node
   linkType: hard
 
@@ -18696,6 +18701,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zod-validation-error@npm:^3.0.3 || ^4.0.0":
+  version: 4.0.2
+  resolution: "zod-validation-error@npm:4.0.2"
+  peerDependencies:
+    zod: ^3.25.0 || ^4.0.0
+  checksum: 10c0/0ccfec48c46de1be440b719cd02044d4abb89ed0e14c13e637cd55bf29102f67ccdba373f25def0fc7130e5f15025be4d557a7edcc95d5a3811599aade689e1b
+  languageName: node
+  linkType: hard
+
 "zod@npm:4.1.11":
   version: 4.1.11
   resolution: "zod@npm:4.1.11"
@@ -18710,6 +18724,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zod@npm:^3.22.4 || ^4.0.0":
+  version: 4.1.12
+  resolution: "zod@npm:4.1.12"
+  checksum: 10c0/b64c1feb19e99d77075261eaf613e0b2be4dfcd3551eff65ad8b4f2a079b61e379854d066f7d447491fcf193f45babd8095551a9d47973d30b46b6d8e2c46774
+  languageName: node
+  linkType: hard
+
 "zustand@npm:5.0.8":
   version: 5.0.8
   resolution: "zustand@npm:5.0.8"