eslint-plugin-react-server-components
eslint-plugin-react-server-components copied to clipboard
Create an exception for the eslint rule regarding server actions
Using server action, we can pass functions as props in server components.
The example below is taken from the Next.js server action post.
export default function Page() {
async function createInvoice(formData: FormData) {
'use server'
const rawFormData = {
customerId: formData.get('customerId'),
amount: formData.get('amount'),
status: formData.get('status'),
}
// mutate data
// revalidate cache
}
return <form action={createInvoice}>...</form>
}
The lint rule is triggered at the <form action={createInvoice}>...</form> part of the example above.
Functions can only be passed as props to Client Components. Add the "use client" directive at the top of the file to use it.eslint(react-server-components/use-client)
package version
- "next": "14.2.4"
- "react": "^18"
- "eslint": "^8"
- "eslint-plugin-react-server-components": "^1.2.0"
PRs welcome! Otherwise I'll try to get to this sometime soon.