noNextAsyncClientComponent

JavaScript (and super languages)

Summary

Rule available since: v2.2.0
Diagnostic Category: lint/nursery/noNextAsyncClientComponent
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- next
Sources:
- Same as @next/no-async-client-component

Description

Prevent client components from being async functions.

This rule prevents the use of async functions for client components in Next.js applications. Client components marked with “use client” directive should not be async as this can cause hydration mismatches, break component rendering lifecycle, and lead to unexpected behavior with React’s concurrent features.

Examples

Invalid

1
"use client";
2

3
export default async function MyComponent() {
4
  return <div>Hello</div>;
5
}

code-block.jsx:3:16 lint/nursery/noNextAsyncClientComponent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The component MyComponent is an async client component, which is not allowed.
  
    1 │ “use client”;
    2 │ 
  > 3 │ export default async function MyComponent() {
      │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 4 │   return <div>Hello</div>;
  > 5 │ }
      │ ^
    6 │ 
  
  ℹ Client components with “use client” directive should not be async functions as this can cause hydration mismatches and break React’s rendering lifecycle.
  
  ℹ Consider using useEffect for async operations inside the component, or remove the “use client” directive if this should be a server component.

Valid

1
"use client";
2

3
export default function MyComponent() {
4
  return <div>Hello</div>;
5
}

1
// No "use client" directive - server component can be async
2
export default async function ServerComponent() {
3
  const data = await fetch('/api/data');
4
  return <div>{data}</div>;
5
}

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noNextAsyncClientComponent": "error"
6
      }
7
    }
8
  }
9
}