New May 19, 2026

How to make a RSC form with server action?

Libraries, Frameworks, etc. All from Newest questions tagged reactjs - Stack Overflow View How to make a RSC form with server action? on stackoverflow.com

With the exciting features of RSC and server action released by React 19, we are going to use them to build a high-performance form. Here is our trying:

  1. We build a very small client-component form.

    'use client'
    

    import { Fieldset, Form } from '@heroui/react' import { useActionState } from 'react'

    export function MyForm({ action, children }) { const [state, submitAction, isPending] = useActionState(action, { error: null, })

    return ( <Form onSubmit={submitAction} validationErrors={state?.error}> <Fieldset disabled={isPending} className='h-full flex flex-col gap-0'> {children} </Fieldset> </Form> ) }

  2. Then we can make other parts RSC.

    import { TextField, Label, Input, FieldError, Button } from '@heroui/react'
    import { MyForm } from './myForm'
    import { uploadDataset } from './actions'
    

    export function MyDataset() { return ( <MyForm action={uploadDataset}> <TextField name='title'> <Label>title</Label> <Input /> <FieldError /> </TextField> <TextField name='description'> <Label>description</Label> <Input /> <FieldError /> </TextField> <Button type='submit'>upload</Button> </MyForm> ) }

Here are some points:

  1. We make most of the form RSC. So it is fast and the js size is small.

  2. Thanks the components of <Form>, <TextField>, <FieldError> from HeroUI, it is easy to propagate error messages.

  3. Server action and uncontrolled components make the code concise and clean. No states and no coherent between components.

But, there is only one thing:

The input texts are cleaned even if uploadDataset returns error.

How to prevent text from resetting?

There are several solutions/workarounds we investigated:

  1. Use onSubmit. We are using it. But we really want to switch to server action.
  2. Let useActionState returns previous states and fill them into defaultValue. Then we have to move all the controls into <MyForm>. It adds coherence and loses RSC.
  3. Controlled text field. It adds coherence and loses RSC.

Any good idea?

Scroll to top