diff --git a/.changeset/loud-terms-confess.md b/.changeset/loud-terms-confess.md new file mode 100644 index 0000000..942dbff --- /dev/null +++ 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 index 603fe4a..f372af7 100644 --- 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
; +}`, + }, ], invalid: [ { diff --git a/src/rules/use-client.ts b/src/rules/use-client.ts index 4e39062..5c15d5a 100644 --- 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) ); }