Next.js Discord

Discord Forum

is it possible to return results from transitions?

Unanswered
Old English Sheepdog posted this in #help-forum
Open in Discord
Old English SheepdogOP
ex. this isnt working for me:

startTransition(async () => {
const res = await myAction(data);

if (res?.error) {
toast(res.error);
}
});

53 Replies

@Old English Sheepdog ex. this isnt working for me: startTransition(async () => { const res = await myAction(data); if (res?.error) { toast(res.error); } });
Ray
what you are trying to archive?
the function you pass to startTransition should be synchronous
@Ray what you are trying to archive? the function you pass to `startTransition` should be synchronous
Old English SheepdogOP
ok so my bad. just had to reload the page lol. it actually works. is there anything wrong with that code?
Ray
according to the doc, you can't pass async function to startTransition
https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-as-a-transition
and I don't see a reason you need to use startTransition from your code, maybe its not the full code?
@Ray and I don't see a reason you need to use `startTransition` from your code, maybe its not the full code?
Old English SheepdogOP
my action creates a db row and revalidates a path. if theres an error, i return an error message and use that message to display a toast
@Ray what do you use the `isPending` state from `useTransition()` for?
Old English SheepdogOP
just a loading indicator saying that the action is in progress. or from a user point of view that their post is being created
if validation fails, i return early with a message
@Ray I think a simple `useState()` hook is enought for your case?
Old English SheepdogOP
but then what about my revalidate
Ray
what revalidate?
@Ray what revalidate?
Old English SheepdogOP
i revalidatePath in my server action after i create my row
i thought im suppose to use transitions for that
Ray
setLoading(true)
const res = await myAction(data);
if (res?.error) {
  toast(res.error);
}
setLoading(false)
@Old English Sheepdog i thought im suppose to use transitions for that
Ray
I don't think you need useTransition hook here. you may need it, if you are using router.push()
@Ray no
Old English SheepdogOP
i mean.. the docs say to use transitions if you are using revalidatePath, revalidateTag, or redirect
@Ray could you send me the link?
Old English SheepdogOP
what the. i swear i read this somewhere. cant find it anymore. i guess im wrong my bad
@Ray no worries
Old English SheepdogOP
so i can use all revalidate and redirect without useTransition?
@Ray yes I think so
Old English SheepdogOP
yea just tested this ur right. thanks! so then whats the point of useTransition with server actions? i dont see a difference between calling an action within a transition or without a transition? from what you mentioned it seems like its just for router actions initiated from clientside?
@Old English Sheepdog yea just tested this ur right. thanks! so then whats the point of useTransition with server actions? i dont see a difference between calling an action within a transition or without a transition? from what you mentioned it seems like its just for router actions initiated from clientside?
Ray
I usually use it when I need to use router.push() in a form. here is an example
const [pending, startTransition] = useTransition();

const onSubmit = form.handleSubmit(async (data) => {
  const { errors } = (await login(data)) || {};
  if (errors?.email) {
    form.setError("email", { message: `${errors.email}` });
    return;
  }
  if (errors?.password) {
    form.setError("password", { message: `${errors.password}` });
    return;
  }
  startTransition(() => {
    router.replace("/dashboard");
  });
});

const isLoading = pending || form.formState.isSubmitting;

without useTransition hook, the ui will exit the loading state before the navigation happen
ok so i just tried it out and startTransition is much cleaner like you said because of the loading state
Ray
because router.replace() is updating the state behind the scenes
Old English SheepdogOP
i added an aritifical 2s timeout
so if i do it without the startTransition i can see the loading state exit
if i use the startTransition its much cleaner
Old English SheepdogOP
so there is a difference
i would prefer to use startTransition if im using redirect then
*if im using redirect in my server action
because i can see the loading state exit before the redirect if i dont use startTransition
Ray
yeah if you redirect in server action, you don't need to use useTransition
@Ray yeah if you redirect in server action, you don't need to use useTransition
Old English SheepdogOP
actually im saying it would be better to use transition with a redirect in the server action
because like i said, you can see the loading state exit if you dont use the trnasition
Ray
let say you are doing redirect in the server
setLoading(true)
const res = await myAction(data);
if (res?.error) {
  setLoading(false)
  toast(res.error);
}

I don't think it will exit the loading state before the redirection?
if you use the transition, the loading state doesnt exit and hence UI is much smoother
you dont end up seeing that flicker
Old English SheepdogOP
ahhhh okay i see what you mean
yea i guess that works as well. but then i guess you gotta make sure that all paths that are not a success return an error. which i guess isnt that bad
then i really wonder whats the point of using transitions with server actions. the docs say :

"To improve the user experience, we recommend using other React APIs like useOptimistic and useTransition to update the UI before the Server Action finishes executing on the server, or to show a pending state."
Ray
well, you could use useTransition if you need it. just keep in mind, the callback function should be synchronous
@Ray well, you could use useTransition if you need it. just keep in mind, the callback function should be synchronous
Old English SheepdogOP
right but weirdly my example also works. im wondering what exactly is wrong about that.
   startTransition(async () => {
      const res = await myAction(data);

      if (res?.error) {
        toast(res.error);
      }
    });

this for some reason works
Ray
yeah, I have tried that and it work too
@Ray yeah, I have tried that and it work too
Old English SheepdogOP
i guess maybe theres a caveat or something lol. transitions are a grey area for me. dont understand enough about them