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.
Common Violations
Invalid
'use server';
export function serverFunction1() {
// ...
}
export const serverFunction2 = function() {
// ...
};
export const serverFunction3 = () => {
// ...
};export function Component() {
function serverFunction1() {
'use server';
// ...
}
const serverFunction2 = function() {
'use server';
// ...
};
const serverFunction3 = () => {
'use server';
// ...
};
return <div>...</div>;
}Valid
'use server';
export async function serverFunction1() {
// ...
}
export const serverFunction2 = async function() {
// ...
};
export const serverFunction3 = async () => {
// ...
};export function Component() {
async function serverFunction1() {
'use server';
// ...
}
const serverFunction2 = async function() {
'use server';
// ...
};
const serverFunction3 = async () => {
'use server';
// ...
};
return <div>...</div>;
}Invalid
import { useState } from 'react';
'use client';export function Component() {
const x = 1;
function serverFunction() {
'use server';
// ...
}
}`use client`;export function Component() {
function serverFunction() {
'use client';
// ...
}
}Valid
'use client';
import { useState } from 'react';export function Component() {
async function serverFunction() {
'use server';
// ...
}
}"use client";
import { useState } from 'react';