Cannot use hooks in server components

[carmelc]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:52:24 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 3.3.0
      pnpm: N/A
    Relevant Packages:
      next: 13.4.10-canary.3
      eslint-config-next: 13.4.10-canary.3
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router, ESLint (eslint-config-next)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/wix/wix-appointments-subscriptions-nextjs-template

To Reproduce

1. Create a new next repo with app directory,
2. Create a simple hook which does nothing but return static info

const useMyHook = () => ({data: 3});

3. Create a server component,

export default async function MyPage({ params }: any) {
  const {data} = useMyHook();
}

4. Run lint

Describe the Bug

Build fails with the error React Hook "useMyHook" cannot be called in an async function. react-hooks/rules-of-hooks

Expected Behavior

Build should pass, hooks are allowed in server components provided that they don't use a client-only hook.

Which browser are you using? (if relevant)

node

How are you deploying your application? (if relevant)

Vercel/Netlify

_NEXT-1437

[Fredkiss3]

hooks are not allowed in server components as they run only once and don't run on the client (where hooks are supposed to be executed).

If you want to use a hook, add "use client" on top of your file to make it a client component.
Also remember, client components cannot be async (as pointed out by the output of link : React Hook "useMyHook" cannot be called in an async function..

If you still want to use a server component (if you want to fetch data directly on the server for ex), you can still pass props from a server component to a client component.

More on the docs here : https://nextjs.org/docs/getting-started/react-essentials

[carmelc]

Thanks for the prompt reply,
According to the docs - https://nextjs.org/docs/getting-started/react-essentials, only "Use custom hooks that depend on state, effects, or browser-only APIs" is not allowed,
I have to say that this error was not present with eslint-config-next@13.4.3, but only when bumping to 13.4.9, not to mention that there are no runtime errors if I just suppress the eslint rule.

[Fredkiss3]

that's okay, technically you can't use a stateful hook (context, state, effect & others), there is a very limited set of hooks allowed, i think useId and use(), so it is normal for the eslint to fail.

If you HAVE TO name your function with use, then suppressing the option is ok.

[carmelc]

I see, maybe we should mark this a feature request to be able to define hooks as "stateless" or something, so they are considered server component safe,
Again, thanks for the quick replies 🙏🏼

[Fredkiss3]

I suppose the lint rule cannot distinguish between stateless and stateful hooks by only looking at the name

[shuding]

Related PR on React’s side: facebook/react#27045

[picardplaisimond]

Is there a fix for that.... ? @acdlite
It seems to be related to your PR.
This creates a lot of false positives. In my case, it interferes with some i18n features that use hooks on server components (without any issues before).

[The-Code-Monkey]

Yeah i have the same issue my DB hook is called useDB which will pull the data from the DB which is a serverside api request which is allowed.

Need some way to disable this. for these types of requests without disabling the rule.

[leerob]

As the discussion has mentioned here, this is not a bug. As a workaround, you could disable the ESLint rule. But even better would be to change the naming of the function. If it's truly not a hook, then rather than useDatabase(), you can have any sort of function that returns a promise like fetchData() which is called from your Async Component.

P.S. we recently made our Server/Client Components more clear!