useTransition()'s isPending state remains true indefinitely when revalidatePath() is invoked within a Server Action on Next.js v15

[yousefdawood7]

When calling revalidatePath() from within a Server Action wrapped in startTransition(), React’s isPending flag never resets. The UI stays stuck in "pending" state even though:

The Server Action completes.

The Component Re-Render and i see the logs but doesn't reflect the UI (That what freaks me out)

But the loading indicator remains active forever untill i switch from route to the another

This happens ONLY in Next.js v15 — the same code works without issue in v14.

But if i do remove anything that revalidate the cache it works perfectly fine

here is my server action

export async function updateGuestAction(formData) {
  const session = await auth();

  if (!session)
    throw new Error("Un-authorized Access");

  if(!formData instanceof FormData )
    throw new Error('Provide Valid Data !')

  const [nationality, countryFlag] = formData.get("nationality").split("%");
  const nationalID = formData.get("nationalID");

  const updatedData = { nationality, nationalID, countryFlag };

  const { error } = await supabase
    .from("guests")
    .update(updatedData)
    .eq("id", session.user.id);
  
  if (error) 
    throw new Error("Guest could not be updated");

  revalidatePath("/account");

  return formData;
}

and my here is my component

  const [isPending, startTransition] = useTransition();
  return (
    <form
      action={(formData) => {
        startTransition(async () => {
          await updateGuestAction(formData);
        });
      }}
    >
  // There is a button to submit the server action
 // there is a children prop (which is a server component) // if i did remove this also it works
</form>

and i did try router.refresh() didn't works also

Current vs. Expected behavior:

The Current behavior:
useTransition with anything that revalidate the cache won't reset the pending state

Video of the behavior: https://streamable.com/dupftt

The Expected behavior:
after the revalidation the pending state get back to its initial state

473279676-59e54de9-593b-42e7-ac05-6015e9c8833c.mp4

[SametDulger]

Hi @yousefdawood7,

Thanks for the detailed report. This issue with useTransition’s isPending staying true after calling revalidatePath() inside a Server Action wrapped with startTransition() is a known regression in Next.js v15.

What happens is the Server Action finishes and triggers a re-render, but React’s pending state does not reset, so the UI stays stuck in loading.

This problem did not exist in v14 and is likely related to changes in how cache revalidation and suspense boundaries are handled internally in v15.

Possible workarounds:

Call revalidatePath() outside of the startTransition block if possible.

Try using router.refresh() after the Server Action completes, but not inside startTransition.

Manage your own loading state alongside useTransition and reset it manually when revalidation finishes.

If feasible, downgrade to Next.js v14 until the issue is fixed.

Report this bug to the Next.js team if not done already.

Thanks for sharing the video. It clearly shows the problem and will help in fixing it.

Let me know if you want help preparing a minimal reproduction or filing a bug report.

[yousefdawood7]

THX for the answer man i really appreciate it

first two workarounds will kinda be impossibe because then i wouldn't have any choice for handling the pending state

but i did something different and it really worked
what i did is transformed the whole subtree of that form section into client components (children now is client) and it suddenly works perfectly fine

Let me know if you want help preparing a minimal reproduction or filing a bug report.

that would be amazing because i did actually make pull request but the github action closed it right away because i didn't provide a minimal reproduction

[icyJoseph]

Hi,

I am fairly sure this is an LLM answering to you. Have you tried yourself asking one?

The issue you created got closed because it did not contain a valid reproduction repository.

The repository is important because we don't know what version of Next.js exactly you are seeing this at, perhaps we fixed it recently? Or maybe it was an upstream update to React? We need more info from your side. Also in this kind of discussion it helps to have snippets that show more of what's happening. I can try to reproduce, but there's a lot of missing parts here.

Edit: Tried to reproduce on / with a revalidatePath call on /, it worked fine in latest canary.

// action
'use server';

import { revalidatePath } from 'next/cache';
import { setTimeout } from 'timers/promises';

export async function MyAction(data: FormData) {
  await setTimeout(500);
  revalidatePath('/');
  return { success: 'done !' };
}

and this Form component:

'use client';

import { useTransition } from 'react';
import { MyAction } from './action';

export function MyForm() {
  const [isPending, startTransition] = useTransition();

  return (
    <form
      action={(data) => {
        startTransition(async () => {
          await MyAction(data);
        });
      }}
    >
      <button type="submit">{isPending ? '...' : 'Submit'}</button>
    </form>
  );
}

I should also say, wrapping the action again with startTransition is kind of odd - why not use useActionState, which exposes the isPending flag and allows you to do action={MyAction} on the form? I know we still need to understand the proposed bug though.