function-definition
Validates and transforms React Client/Server Function definitions.
This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
Full Name in eslint-plugin-react-rsc
react-rsc/function-definitionFull Name in @eslint-react/eslint-plugin
@eslint-react/rsc-function-definitionFeatures
🔧 🧪
Presets
rsc
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
It includes the following checks:
- If a file has a top-level
'use server'directive, exported functions must be async. Functions with their own'use server'directive must also be async. - If a file has a top-level
'use client'or'use server'directive, it must be placed at the very beginning of the file, before any imports or other code. Comments above the directive are allowed. - If a function has a
'use server'directive, it must be placed at the very beginning of the function body. 'use client'and'use server'directives must be written with single or double quotes, not backticks.- The
'use client'directive must not be used inside a function body.
Examples
Server functions not marked as async
// Problem: Exported server functions must be async
'use server';
export function serverFunction1() {
// ...
}
export const serverFunction2 = function() {
// ...
};
export const serverFunction3 = () => {
// ...
};// Problem: Server functions inside components must be async
export function Component() {
function serverFunction1() {
'use server';
// ...
}
const serverFunction2 = function() {
'use server';
// ...
};
const serverFunction3 = () => {
'use server';
// ...
};
return <div>...</div>;
}Correctly marking server functions as async
// Recommended: Exported async server functions
'use server';
export async function serverFunction1() {
// ...
}
export const serverFunction2 = async function() {
// ...
};
export const serverFunction3 = async () => {
// ...
};// Recommended: Async server functions inside components
export function Component() {
async function serverFunction1() {
'use server';
// ...
}
const serverFunction2 = async function() {
'use server';
// ...
};
const serverFunction3 = async () => {
'use server';
// ...
};
return <div>...</div>;
}Incorrect directive placement or syntax
// Problem: Directive must be at the very beginning of the file, before imports
import { useState } from 'react';
'use client';// Problem: Directive must be at the very beginning of the function body
export function Component() {
const x = 1;
function serverFunction() {
'use server';
// ...
}
}// Problem: Directives must use single or double quotes, not backticks
`use client`;// Problem: 'use client' must not be used inside a function body
export function Component() {
function serverFunction() {
'use client';
// ...
}
}Correct directive placement and syntax
// Recommended: Directive at the top of the file before imports
'use client';
import { useState } from 'react';// Recommended: Directive at the beginning of the function body
export function Component() {
async function serverFunction() {
'use server';
// ...
}
}// Recommended: Double quotes are also acceptable
"use client";
import { useState } from 'react';