feat: allow useMemo hook in server components

roginfarrer · Jul 24, 2024 · fa2b9f7 · fa2b9f7
1 parent d3c3cf6
commit fa2b9f7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/.changeset/loud-terms-confess.md b/.changeset/loud-terms-confess.md
@@ -0,0 +1,5 @@
+---
+"eslint-plugin-react-server-components": minor
+---
+
+allow useMemo hook in RSC
diff --git a/src/rules/use-client.test.ts b/src/rules/use-client.test.ts
@@ -171,6 +171,13 @@ export function Foo() {
 }`,
           options: [{ allowedServerHooks: ["useTranslations"] }],
         },
+        {
+          code: `import {useMemo} from 'react';
+const Button = ({id}) => {
+  const memoizedId = useMemo(() => id, [id]);
+  return <div id={memoizedId} />;
+}`,
+        },
       ],
       invalid: [
         {

diff --git a/src/rules/use-client.ts b/src/rules/use-client.ts
@@ -81,9 +81,8 @@ const create = Components.detect(
     function isClientOnlyHook(name: string) {
       return (
         // `useId` is the only hook that's allowed in server components
-        name !== "useId" &&
         !(options.allowedServerHooks || []).includes(name) &&
-        /^use[A-Z]/.test(name)
+        /^use(?!(Id|Memo)$)[A-Z]/.test(name)
       );
     }