useReactAsyncServerFunction (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.4.12
Diagnostic Category: lint/nursery/useReactAsyncServerFunction
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- react
Sources:
- Same as react/async-server-action
- Same as @eslint-react/rsc-function-definition
- Same as react-rsc/function-definition

How to configure

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

Description

Require functions with the “use server” directive to be async.

Require Server Functions (functions in a file with a top-level "use server" directive or functions with their own "use server" directive) to be async.

See the React documentation for more details.

Examples

Invalid

1
<form
2
  action={() => {
3
    'use server';
4
    // ...
5
  }}
6
>
7
  // ...
8
</form>

code-block.jsx:2:11 lint/nursery/useReactAsyncServerFunction  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This server function is missing the async keyword.
  
    1 │ <form
  > 2 │   action={() => {
      │           ^^^^^^^
  > 3 │     'use server';
  > 4 │     // ...
  > 5 │   }}
      │   ^
    6 │ >
    7 │   // ...
  
  ℹ Functions with the "use server" directive are React Server Functions and therefore must be async.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Add async keyword.
  
    2 │ ··action={async·()·=>·{
      │           ++++++

1
function serverFunction() {
2
  'use server';
3
  // ...
4
}

code-block.js:1:1 lint/nursery/useReactAsyncServerFunction  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This server function is missing the async keyword.
  
  > 1 │ function serverFunction() {
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 2 │   'use server';
  > 3 │   // ...
  > 4 │ }
      │ ^
    5 │ 
  
  ℹ Functions with the "use server" directive are React Server Functions and therefore must be async.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Add async keyword.
  
    1 │ async·function·serverFunction()·{
      │ ++++++

1
'use server';
2
export function serverFunction() {
3
  // ...
4
}

code-block.js:2:8 lint/nursery/useReactAsyncServerFunction  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This server function is missing the async keyword.
  
    1 │ 'use server';
  > 2 │ export function serverFunction() {
      │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 3 │   // ...
  > 4 │ }
      │ ^
    5 │ 
  
  ℹ Functions exported from files with the "use server" directive are React Server Functions and therefore must be async.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Add async keyword.
  
    2 │ export·async·function·serverFunction()·{
      │        ++++++

Valid

1
<form
2
  action={async () => {
3
    'use server';
4
    // ...
5
  }}
6
>
7
  // ...
8
</form>

1
async function serverFunction() {
2
  'use server';
3
  // ...
4
}

1
'use server';
2
export async function serverFunction() {
3
  // ...
4
}