Bump eslint-plugin-react-hooks from 6.0.0-rc.1 to 7.0.0 (#14379)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Pascal Birchler <pascalb@google.com>

Author: dependabot[bot]

.eslintrc

@@ -7,7 +7,7 @@
     "plugin:import/recommended",
     "plugin:@eslint-community/eslint-comments/recommended",
     "plugin:react/recommended",
-    "plugin:react-hooks/recommended-legacy",
+    "plugin:react-hooks/recommended-latest",
     "plugin:prettier/recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:jsdoc/recommended",
@@ -216,15 +216,21 @@
     "react/no-unused-prop-types": "error",
     "react/react-in-jsx-scope": "off",
     "react/self-closing-comp": "error",
-    "react-hooks/react-compiler": [
-      "error",
-      {
-        "environment": {
-          "enableTreatRefLikeIdentifiersAsRefs": true,
-          "validateRefAccessDuringRender": false
-        }
-      }
-    ],
+    "react-hooks/config": "error",
+    "react-hooks/error-boundaries": "error",
+    "react-hooks/component-hook-factories": "error",
+    "react-hooks/gating": "error",
+    "react-hooks/globals": "error",
+    "react-hooks/immutability": "error",
+    "react-hooks/preserve-manual-memoization": "error",
+    "react-hooks/purity": "error",
+    "react-hooks/refs": "error",
+    "react-hooks/set-state-in-effect": "error",
+    "react-hooks/set-state-in-render": "error",
+    "react-hooks/static-components": "error",
+    "react-hooks/unsupported-syntax": "warn",
+    "react-hooks/use-memo": "error",
+    "react-hooks/incompatible-library": "warn",
     "import/no-extraneous-dependencies": "error",
     "import/no-unresolved": "error",
     "import/order": [
@@ -435,7 +441,8 @@
       "rules": {
         "@eslint-community/eslint-comments/require-description": "off",
         "react/prop-types": "off",
-        "react-hooks/react-compiler": "off",
+        "react-hooks/globals": "off",
+        "react-hooks/immutability": "off",
         "jest/no-hooks": "off",
         "jest/no-untyped-mock-factory": "off",
         "jest/max-expects": "off",
@@ -957,10 +964,9 @@
         "packages/story-editor/src/components/videoTrim/useVideoNode.js",
         "packages/transform/src/useTransformHandler.ts",
         "packages/wp-story-editor/src/components/fontCheck/index.js"
-
       ],
       "rules": {
-        "react-hooks/react-compiler": "off"
+        "react-hooks/refs": "off"
       }
     }
   ]

package-lock.json

@@ -119,7 +119,7 @@
     "eslint-plugin-oxlint": "^1.22.0",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^6.0.0-rc.1",
+    "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-styled-components-a11y": "^2.2.1",
     "eslint-plugin-testing-library": "^7.13.1",

package.json

@@ -69,6 +69,7 @@ function ComposableWrapper({
     [animationParts]
   );
 
+  // eslint-disable-next-line react-hooks/static-components -- FIXME
   return <ComposedWrapper>{children}</ComposedWrapper>;
 }
 function AMPWrapper({ target, children }: WrapperProps) {

packages/animation/src/components/AMPWrapper.tsx

@@ -281,6 +281,7 @@ function Provider({
     return cancel;
   }, [filteredWAAPIAnimations, animationState, complete]);
 
+  // eslint-disable-next-line react-hooks/refs -- FIXME
   onWAAPIFinishRef.current = onWAAPIFinish;
   useEffect(() => {
     if (AnimationMachineState.Complete === animationState) {

packages/animation/src/components/provider.tsx

@@ -82,7 +82,6 @@ function MyStoriesView() {
   const isMountedRef = useRef(false);
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/react-compiler -- FIXME
     isMountedRef.current = true;
 
     return () => {

packages/dashboard/src/app/views/myStories/index.js

@@ -76,6 +76,7 @@ const InterfaceSkeleton = ({ additionalRoutes }) => {
     currentPath === APP_ROUTES.DASHBOARD
   );
   const [isRedirectComplete, setIsRedirectComplete] = useState(
+    // eslint-disable-next-line react-hooks/refs -- FIXME
     !isFirstLoadOnMyStoriesRef.current
   );
 

packages/dashboard/src/components/interfaceSkeleton/index.js

@@ -115,6 +115,7 @@ export default function usePagePreviewSize(options = {}) {
 
   const [availableContainerSpace, setAvailableContainerSpace] = useState(
     getContainerWidth(
+      // eslint-disable-next-line react-hooks/refs -- FIXME
       dashboardContainerRef.current?.offsetWidth || window.innerWidth
     )
   );

packages/dashboard/src/utils/usePagePreviewSize.js

@@ -90,7 +90,6 @@ export default function useStoryView({
   }, [viewStyle, setViewStyle]);
 
   const requestNextPage = useCallback(() => {
-    // eslint-disable-next-line react-hooks/react-compiler -- FIXME
     showStoriesWhileLoadingRef.current = true;
     setPageClamped(page + 1);
   }, [page, setPageClamped]);

packages/dashboard/src/utils/useStoryView.js

@@ -60,6 +60,7 @@ const ContextMenu = forwardRef(
         isHorizontal={isHorizontal}
         onDismiss={onDismiss}
       >
+        {/* eslint-disable-next-line react-hooks/static-components -- FIXME */}
         <Wrapper
           aria-label={ariaLabel}
           isInline={isInline}