Server Actions Example

[bestickley]

Hi, I'm using react-hook-form with Next.js server actions. There has been some discussion here about how to do so, but I wanted to start this discussion to gather best practices. Here is my current implementation. Would appreciate any feedback to guide others who are doing the same!

Some context on this component: it's a simple form to create an item (name and description). After creating the item, it redirects to the table containing all the items

// CreateItem.tsx
"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { Box, Typography } from "@mui/material";
import { LoadingButton } from "@mui/lab";
import { itemSchema, type ItemInputSchema } from "@myapp1/core/shared";
import { useTransition } from "react";
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import { RhfTextField } from "@/components/rhf-inputs/RhfTextField";
import { createItemAction } from "./create-item.action";

export function CreateItem() {
  const { control, handleSubmit } = useForm<ItemInputSchema>({
    defaultValues: {
      name: "",
      description: "",
    },
    resolver: zodResolver(itemSchema),
  });
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const handleClick = handleSubmit(async (d) => {
    startTransition(async () => {
      await createItemAction(d);
      router.replace("/items");
    });
  });
  return (
    <Box display="flex" justifyContent="center">
      <Box
        display="flex"
        flexDirection="column"
        gap={2}
        flexGrow="1"
        maxWidth={(t) => t.breakpoints.values.sm}
      >
        <Typography variant="h6">New Item</Typography>
        <Box display="flex" flexDirection="column" gap={2}>
          <RhfTextField control={control} fullWidth label="Name" name="name" />
          <RhfTextField
            control={control}
            fullWidth
            label="Description"
            multiline
            name="description"
          />
        </Box>
        <Box display="flex" gap={2} justifyContent="flex-end">
          <LoadingButton
            color="success"
            loading={isPending}
            onClick={handleClick}
            variant="contained"
          >
            Submit
          </LoadingButton>
        </Box>
      </Box>
    </Box>
  );
}

// create-item.action.ts
"use server";

import { createItemUseCase } from "@/core-server";
import { revalidatePath } from "next/cache";

export async function createItemAction(
  props: Parameters<typeof createItemUseCase>[0],
) {
  await createItemUseCase(props);
  revalidatePath("/items");
}

[asterikx]

In the React docs, it says that the function passed to startTransition must be synchronous :/

[asterikx]

I still have doubts that React will be able to mark all state updates (through router.replace) as transitions though

[bestickley]

That's possible. If you have an alternative way to do it, please let me know!

[codinginflow]

You can pass an async function to startTransition when using server actions. This is a new beta change in React.

[asterikx]

It's working for me too. Just worth noting, that isSubmitting from formState is not in sync when using startTransition

[bestickley]

@asterikx, isSubmitting worked for me when using startTransition

[asterikx]

Why isn't it possible to pass the server action to the action prop of the Form component? It's only accepting string arguments...

[bestickley]

I'm not sure. I'm not using the Form component.

[sos0]

If you update your React types dependency, it should be able to accept non-string arguments.

[xaqbr]

isPending doesn't seem to be updating for me, am I doing it right? It always stays at false.

EDIT: Nevermind figured it out, I forgot actions need to be in a separate file.

"use client";

import { useTransition } from "react";
import { SubmitHandler, useForm } from "react-hook-form";

type SignupData = {
    username: string;
    emailAddress: string;
    password: string;
    inviteCode: string;
};

export default function SignupForm() {
    const [isPending, startTransition] = useTransition();
    const { register, handleSubmit } = useForm<SignupData>();

    const onSubmit: SubmitHandler<SignupData> = (data) => {
        startTransition(async () => {
            await new Promise((res) => setTimeout(res, 1000));
            console.log("test");
        });
    };

    return (
        <>
            <button>{JSON.stringify(isPending)}</button>
            <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
                <div className="grid lg:grid-cols-2 space-x-4">
                    <div className="form-control">
                        <label className="label" htmlFor="username">
                            <span className="label-text">Username</span>
                        </label>
                        <input
                            className="input input-bordered"
                            id="username"
                            {...register("username")}
                        ></input>
                    </div>
                    <div className="form-control">
                        <label className="label" htmlFor="email">
                            <span className="label-text">Email address</span>
                        </label>
                        <input
                            className="input input-bordered"
                            type="email"
                            id="email"
                            {...register("emailAddress")}
                        ></input>
                    </div>
                </div>
                <div className="form-control">
                    <label className="label" htmlFor="password">
                        <span className="label-text">Password</span>
                    </label>
                    <input
                        className="input input-bordered"
                        type="password"
                        id="password"
                        {...register("password")}
                    ></input>
                </div>
                <div className="form-control">
                    <label className="label" htmlFor="inviteCode">
                        <span className="label-text">Invite code</span>
                    </label>
                    <input
                        className="input input-bordered"
                        id="inviteCode"
                        {...register("inviteCode")}
                    ></input>
                </div>
                <button className="btn btn-block btn-primary" type="submit">
                    Create account
                </button>
            </form>
        </>
    );
}

[taylor-lindores-reeves]

Is there any difference whatsoever between:

    const [isPending, startTransition] = useTransition();
    const { register, handleSubmit } = useForm<SignupData>();

    const onSubmit: SubmitHandler<SignupData> = (data) => {
        startTransition(async () => {
            await new Promise((res) => setTimeout(res, 1000));
            console.log("test");
        });
    };

and...

        const form = useForm()
	const { isSubmitting, isValid } = form.formState;

	const onSubmit: SubmitHandler<FormData> = async (formData) => {
		form.trigger();
		if (!isValid) return;
		const results = await createAdditionalInfoAction(formData);
	};

[ShueiYang]

I am still confuse why we need the useTransition hook on the server action outside the form action, try both it all work, however if i use the transition hook it break the RHF isSubmitting method, even isPending return false before the data is validated, and without transition the method isSubmitting is working as expected.

EDIT: ok I manage to make isPending from the transition hook work by writing like this, but still, I still don't see what's the difference.

 const isMutating = isPending || isSubmitting

  const onSubmitUpload = handleSubmit(async(data) => {
    startTransition(async() => {
      await uploadProject(data);
      router.refresh();
    })
  })

[bestickley]

Does this help?

https://scastiel.dev/server-components-actions-react-nextjs

[ShueiYang]

Well it explain how server action can work with RHF, it's nice, but it didn't explain the difference using transition hook or why we would need it in RHF.

[bestickley]

@ShueiYang, I think the purpose of useTransition is to enable state actions to not block the UI. Basically a 2nd priority state update. So you won't be able to tell the difference unless you try and click around and change state quickly during the transition. I'm not totally sure though.

[theonlydaleking]

I've actually struggled to find a real-world example where I wouldn't want the action to block the UI. In the case of submitting a form it feels natural to do things like disable submit buttons until we've heard back from the server. I can see it useful for long running operations like complex filters. I can at least imagine a case where a form submission would need a useTransition but I've never realistically needed it in the wild.

It seemed redundant. Also not looking to over optimise early

Personally do use useOptimitic however.

[robahtou]

Here is another take on using Server Actions with Validators AJV & Zod (see branches): https://github.com/robahtou/issues-react-hook-form

The main points are:

1. not using RHF as the source of truth for form data validation
2. use the validator returned data as the source of truth
3. bias using action={handleAction} attribute, useFormState, useFormStatus, and explicitly use the validator in the handleActio
4. RHF resolver is not used

[bhkangw]

I'm dealing with buggy and slow behavior after introducing using RHF with server actions. Can you share what you experienced before switching to this current implementation?

[robahtou]

My use case from the start was a bit complicated so from the very beginning I was having issues with RHF + SA, especially from a validation perspective. I didn't analyze any performance issues since I never got to a 'stable' point with RHF. Now though, with the separation between RHF and validation (not using RHF resolver) I have a path forward to get to stable and will be able to perform analysis soon enough.