Next.js 16 Modern Blog

Edit Post

Title

Description

ContentMarkdown supported

# useTransition

`useTransition` marks state updates as non-urgent, keeping your UI responsive during expensive operations.

## Example: DeletePostButton

From `app/dashboard/[slug]/_components/DeletePostButton.tsx`:

```tsx
'use client';

import { useTransition } from 'react';

export function DeletePostButton({ slug }) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

function deleteAction() {
    startTransition(async () => {
      await deletePost(slug);
      router.push('/dashboard');
    });
  }

return (
    <button onClick={deleteAction} disabled={isPending}>
      {isPending ? 'Deleting...' : 'Delete'}
    </button>
  );
}
```

When clicked, `isPending` becomes true immediately and stays true until the Server Function and navigation complete.

## Caveat: State Updates After Await

State updates after `await` need nested `startTransition`:

```tsx
startTransition(async () => {
  await someAsyncFunction();
  startTransition(() => { setState('done'); }); // ✅
});
```

In the delete example, `router.push` handles this internally.

Published