I'm using an async useTransition hook with a server action inside. I'm getting a weird result. Basically the promise is running two times (values are then duplicated in DB because of that) and even when the promise is finished (success or error) the useTransition pending state keeps loading indefinitely.

useTransition might not even be the right way to achieve that ?


In client:

startTransition(async () => {
        const res = await action(formData) <== running two times, why ?

        if (res?.success) {
          toast.error("error")
          return
        }
      })

Server action:

"use server"
...

export async function action(formData) {
  const options: AxiosRequestConfig = {
    method: 'POST',
    url: ...,
    headers: {
      ...
    },
    data: formData,
  }

  try {
    const res = await axios<{ id: string }>(options)

    await otherAction({
      ...
    })

    return redirect(ROUTE_PATH)
  } catch (e) {
    return { success: false }
  }
}