Skip to content

Cannot use hooks in server componentsΒ #52566

Closed
@carmelc

Description

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});
  1. Create a server component,
export default async function MyPage({ params }: any) {
  const {data} = useMyHook();
}
  1. 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

Metadata

Assignees

No one assigned

    Labels

    UpstreamRelated to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).bugIssue was opened via the bug report template.linear: nextConfirmed issue that is tracked by the Next.js team.locked

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions