useLinkStatus for Link Pending State

The useLinkStatus hook provides pending state for <Link> navigations. It must be used inside a descendant component of Link.

When to Use

Use useLinkStatus when:

Prefetching is disabled or in progress
The destination route is dynamic and doesn't have a loading.js
You want inline feedback (spinner, shimmer) on the clicked link itself

The Pattern

'use client';

import Link, { useLinkStatus } from 'next/link';
import { Loader2, ArrowUpDown } from 'lucide-react';

function SortIndicator({ icon: Icon, label }: { icon: typeof ArrowUpDown; label: string }) {
  const { pending } = useLinkStatus();

  return (
    <>
      {pending ? <Loader2 className="size-4 animate-spin" /> : <Icon className="size-4" />}
      <span>{label}</span>
    </>
  );
}

export function SortButton() {
  return (
    <Link href="/dashboard?sort=newest" prefetch={false} className="...">
      <SortIndicator icon={ArrowUpDown} label="Newest" />
    </Link>
  );
}

'use client';

import Link, { useLinkStatus } from 'next/link';
import { Loader2, ArrowUpDown } from 'lucide-react';

function SortIndicator({ icon:

Key Points

Must be a Link descendant - useLinkStatus only works inside a component rendered within <Link>
Use prefetch={false} - If the route is prefetched, pending state is skipped
Extract to child component - The hook tracks the parent Link's navigation state
Style as Link - Use buttonVariants from shadcn/ui to style Links as buttons

vs useTransition + router.push

| Approach | Pros | Cons | |----------|------|------| | useLinkStatus | Simpler, no state management, declarative | Must use <Link>, no optimistic updates | | useTransition + router.push | Full control, optimistic updates possible | More boilerplate, imperative |

Choose useLinkStatus for simple navigation feedback. Use useTransition when you need optimistic state updates during navigation.

useLinkStatus for Link Pending State

The useLinkStatus hook provides pending state for <Link> navigations. It must be used inside a descendant component of Link.

When to Use

Use useLinkStatus when:

Prefetching is disabled or in progress
The destination route is dynamic and doesn't have a loading.js
You want inline feedback (spinner, shimmer) on the clicked link itself

The Pattern

'use client';

import Link, { useLinkStatus } from 'next/link';
import { Loader2, ArrowUpDown } from 'lucide-react';

function SortIndicator({ icon: Icon, label }: { icon: typeof ArrowUpDown; label: string }) {
  const { pending } = useLinkStatus();

  return (
    <>
      {pending ? <Loader2 className="size-4 animate-spin" /> : <Icon className="size-4" />}
      <span>{label}</span>
    </>
  );
}

export function SortButton() {
  return (
    <Link href="/dashboard?sort=newest" prefetch={false} className="...">
      <SortIndicator icon={ArrowUpDown} label="Newest" />
    </Link>
  );
}

'use client';

import Link, { useLinkStatus } from 'next/link';
import { Loader2, ArrowUpDown } from 'lucide-react';

function SortIndicator({ icon:

Key Points

Must be a Link descendant - useLinkStatus only works inside a component rendered within <Link>
Use prefetch={false} - If the route is prefetched, pending state is skipped
Extract to child component - The hook tracks the parent Link's navigation state
Style as Link - Use buttonVariants from shadcn/ui to style Links as buttons

vs useTransition + router.push

Choose useLinkStatus for simple navigation feedback. Use useTransition when you need optimistic state updates during navigation.

useLinkStatus for Navigation

useLinkStatus for Link Pending State

When to Use

The Pattern

Key Points

vs useTransition + router.push

useLinkStatus for Navigation

useLinkStatus for Link Pending State

When to Use

The Pattern

Key Points

vs useTransition + router.push