Why no `React.useTransition()` in `useServerAction()`?

[andreas-gobell-mw]

While checking the useServerAction() source I saw that it does not use React.useTransition() to wrap the action execution in a startTransition.

In contrast next-safe-action's useAction implementation does so.

Is oRPC's implementation to omit startTransition a deliberate choice and if yes, what is the reasoning behind it?

---

BTW I saw that next-safe-action also provides additional hooks like useOptimisticAction and useStateAction(). Maybe these are also interesting to provide for oRPC to be attractive to next-safe-action users?

[dinwwwh]

As you can see, useServerAction is quite simple. I'm not really a React expert, so any PRs or improvements are more than welcome!

I actually don't know the benefit of useTransition in this case, because we only have one state (AGAIN, I'M NOT GOOD AT FRONT END)

[andreas-gobell-mw]

I am still migrating to and figuring out React 19 so I can't articulate the advantages of useTransition clearly. However the docs Calling a Server Function outside of

state:

When using a Server Function outside a form, call the Server Function in a Transition, which allows you to display a loading indicator, show optimistic state updates, and handle unexpected errors. Forms will automatically wrap Server Functions in transitions.

So this enables desirable features and seems to be the expected way to use server functions.

[dinwwwh]

Can you help me create a PR for useTransition?
Should I just wrap the execute call and the post-state update inside startTransition, or would it be better to also expose and use the isPending value from useTransition?

const [_, startTransition] = useTransition()

  const execute = useCallback(async (input: TInput, executeOptions: UseServerActionExecuteOptions<TInput, TOutput, UnactionableError<TError>> = {}) => {
    const executedAt = new Date()

    setState({
      data: undefined,
      error: null,
      isIdle: false,
      isPending: true,
      isSuccess: false,
      isError: false,
      status: 'pending',
      executedAt,
      input,
    })

   startTransition(() => {
         const result = await safe(intercept(
        [...toArray(options.interceptors), ...toArray(executeOptions.interceptors)],
        { input: input as TInput },
        ({ input }) => action(input).then(([error, data]) => {
          if (error) {
            throw createORPCErrorFromJson(error)
          }
    
          return data as TOutput
        }),
    ))

      setState({
        data: result.data,
        error: result.error as any,
        isIdle: false,
        isPending: false,
        isSuccess: !result.error,
        isError: !!result.error,
        status: !result.error ? 'success' : 'error',
        executedAt,
        input,
      })
   })

    return result
  }, [action, ...toArray(options.interceptors)])

[andreas-gobell-mw]

I think it is just about wrapping in startTransition and that it would make sense to use the pending coming from React.

I am on mobile right now and could only take a short look, I’ll have more time and get back to you tomorrow.

[dinwwwh]

Help me review this PR: https://github.com/unnoq/orpc/pull/459

[andreas-gobell-mw]

I did the review. Sorry could not do it earlier due to private matters.