fix: remove react hooks linter suppressions in PT hooks (#7222)

* chore(deps): bump react-compiler deps * fix: remove react hooks linter suppressions in PT hooks
sanity-io · Aug 1, 2024 · f5cac7b · f5cac7b
1 parent cade4c7
commit f5cac7b
Show file tree

Hide file tree

Showing 4 changed files with 334 additions and 326 deletions.
diff --git a/dev/test-next-studio/package.json b/dev/test-next-studio/package.json
@@ -12,14 +12,14 @@
   },
   "dependencies": {
     "@sanity/vision": "workspace:*",
-    "babel-plugin-react-compiler": "0.0.0-experimental-938cd9a-20240601",
+    "babel-plugin-react-compiler": "0.0.0-experimental-334f00b-20240725",
     "next": "15.0.0-rc.0",
-    "react": "19.0.0-rc-38e3b23483-20240529",
-    "react-dom": "19.0.0-rc-38e3b23483-20240529",
-    "react-is": "19.0.0-rc-38e3b23483-20240529",
+    "react": "19.0.0-rc-a7d1240c-20240731",
+    "react-dom": "19.0.0-rc-a7d1240c-20240731",
+    "react-is": "19.0.0-rc-a7d1240c-20240731",
     "sanity": "workspace:*",
     "sanity-test-studio": "workspace:*",
-    "styled-components": "^6.1.11",
+    "styled-components": "^6.1.12",
     "typescript": "5.5.4"
   }
 }
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "check:deps": "pnpm --recursive --parallel exec depcheck",
     "check:format": "prettier . --check",
     "check:lint": "turbo run lint --continue -- --quiet",
-    "check:react-compiler": "eslint --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 27 .",
+    "check:react-compiler": "eslint --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 7 .",
     "check:test": "run-s test -- --silent",
     "check:types": "tsc && turbo run check:types --filter='./packages/*' --filter='./packages/@sanity/*'",
     "chore:format:fix": "prettier --cache --write .",
@@ -140,7 +140,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-a97cca1-20240529",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-tsdoc": "^0.3.0",

diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/hooks.ts b/packages/sanity/src/core/form/inputs/PortableText/toolbar/hooks.ts
@@ -22,16 +22,20 @@ export function useFocusBlock(): PortableTextBlock | undefined {
   const editor = usePortableTextEditor()
   const selection = usePortableTextEditorSelection()
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(() => PortableTextEditor.focusBlock(editor), [editor, selection]) // selection must be an additional dep here
+  return useMemo(
+    () => (selection ? PortableTextEditor.focusBlock(editor) : undefined),
+    [editor, selection],
+  )
 }
 
 export function useFocusChild(): PortableTextChild | undefined {
   const editor = usePortableTextEditor()
   const selection = usePortableTextEditorSelection()
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(() => PortableTextEditor.focusChild(editor), [editor, selection]) // selection must be an additional dep here
+  return useMemo(
+    () => (selection ? PortableTextEditor.focusChild(editor) : undefined),
+    [editor, selection],
+  )
 }
 
 export function useActionGroups({
@@ -75,29 +79,23 @@ export function useActiveActionKeys({
   const selection = usePortableTextEditorSelection()
 
   return useUnique(
-    useMemo(
-      () => {
-        return actions
-          .filter((a) => {
-            if (a.type === 'annotation') {
-              return PortableTextEditor.isAnnotationActive(editor, a.key)
-            }
+    useMemo(() => {
+      return selection
+        ? actions
+            .filter((a) => {
+              if (a.type === 'annotation') {
+                return PortableTextEditor.isAnnotationActive(editor, a.key)
+              }
 
-            if (a.type === 'listStyle') {
-              return PortableTextEditor.hasListStyle(editor, a.key)
-            }
+              if (a.type === 'listStyle') {
+                return PortableTextEditor.hasListStyle(editor, a.key)
+              }
 
-            return PortableTextEditor.isMarkActive(editor, a.key)
-          })
-          .map((a) => a.key)
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [
-        editor,
-        // This is needed so that active actions update as `selection` changes
-        selection,
-      ],
-    ),
+              return PortableTextEditor.isMarkActive(editor, a.key)
+            })
+            .map((a) => a.key)
+        : []
+    }, [actions, editor, selection]),
   )
 }
 
@@ -109,13 +107,12 @@ export function useActiveStyleKeys({items}: {items: BlockStyleItem[]}): string[]
   return useUnique(
     useMemo(
       () =>
-        items.filter((i) => PortableTextEditor.hasBlockStyle(editor, i.style)).map((i) => i.style),
-      //  eslint-disable-next-line react-hooks/exhaustive-deps
-      [
-        focusBlock,
-        // This is needed so that active styles update as `selection` changes
-        selection,
-      ],
+        focusBlock && selection
+          ? items
+              .filter((i) => PortableTextEditor.hasBlockStyle(editor, i.style))
+              .map((i) => i.style)
+          : [],
+      [editor, focusBlock, items, selection],
     ),
   )
 }