useTransition + router.refresh(): isPending stays false when logic is moved to a custom hook

[iNikAnn]

Summary

I am experiencing an issue with useTransition and router.refresh() in Next.js 15.3.3. When the logic is executed directly inside a component, isPending works as expected. However, when the exact same logic is moved into a custom hook, isPending never becomes true.

Part 1: Working Scenario (Inside Component)
In this case, when I click the button, isPending correctly flips to true while the page is refreshing.

'use client';

import { useRouter } from 'next/navigation';
import { useTransition } from 'react';

export default function Component() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const handleRefresh = () => {
    // This works! isPending becomes true.
    startTransition(() => {
      router.refresh();
    });
  };

  return (
    <button onClick={handleRefresh}>Refresh Page</button>
  );
}

Part 2: Broken Scenario (Inside Custom Hook)
When I move the logic into a hook, even if I pass the router and startTransition from the parent component as arguments, isPending remains false throughout the entire operation.

// useMyHook.ts
export function useMyHook({ router, startTransition }) {
  const handleClick = () => {
    // This DOES NOT work. isPending in the component stays false.
    startTransition(() => {
      console.log('Refreshing...');
      router.refresh();
    });
  };

  return { handleClick};
}

// Component.tsx
'use client';

import { useRouter } from 'next/navigation';
import { useTransition } from 'react';
import { useMyHook } from './useMyHook';

export default function Component() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const { handleClick } = useMyHook({
    router,
    startTransition
  });

  return (
    <button onClick={handleClick}>Refresh via Hook</button>
  );
}

How can I ensure isPending correctly reflects the router.refresh() state when using custom hooks to handle post-action logic?

Additional information

Next version: 15.3.3

Example

No response

[pouriya73]

Hi @iNikAnn

You’re trying to use isPending as “router.refresh() loading state”. That’s not what useTransition guarantees.

isPending only tracks React work scheduled by that specific useTransition() hook instance. router.refresh() is a Next.js navigation/cache invalidation trigger it’s not a normal “React state update you own”, and its timing/ownership gets shaky once you move the handler out and start passing startTransition around. So your “pending” signal becomes unreliable.

keep useTransition inside the hook and return isPending

// useRefresh.ts
'use client'

import { useRouter } from 'next/navigation'
import { useCallback, useTransition } from 'react'

export function useRefresh() {
  const router = useRouter()
  const [isPending, startTransition] = useTransition()

  const refresh = useCallback(() => {
    startTransition(() => {
      router.refresh()
    })
  }, [router, startTransition])

  return { isPending, refresh }
}

// Component.tsx
'use client'

import { useRefresh } from './useRefresh'

export default function Component() {
  const { isPending, refresh } = useRefresh()

  return (
    <button onClick={refresh} disabled={isPending}>
      {isPending ? 'Refreshing…' : 'Refresh'}
    </button>
  )
}

If you must keep pending in the parent

Then don’t rely on useTransition for router.refresh() at all. Use your own boolean:

const [refreshing, setRefreshing] = useState(false)

const refresh = async () => {
  setRefreshing(true)
  router.refresh()
  // you need some real “done” signal to setRefreshing(false)
}

But be honest: there is no official “refresh finished” event for router.refresh(). If you need a real completion signal, use a server action / fetch + state you control, not router.refresh() as your “async operation”.

[iNikAnn]

Thanks for the reply!

I actually figured it out. I apologize for misleading you a bit — my initial simplified example didn't perfectly match my real code, and that's where the issue was.

In my real hook, I was running additional side effects (state updates) before calling the transition. Those updates triggered a re-render, and calling startTransition after that was causing isPending to stay false.

Moving everything inside the transition fixed it.

// ❌ DOES NOT WORK: isPending stays false
const refresh = () => {
  // Side effect triggers re-render before transition
  onSuccess?.(); 

  startTransition(() => {
    router.refresh();
  });
};

// ✅ WORKS: isPending correctly becomes true
const refresh = () => {
  startTransition(() => {
    // Run side effects and refresh together
    onSuccess?.(); 
    router.refresh();
  });
};