How to fix useTransition() can only be used in Client Components in React

Open the file containing the component that uses useTransition and add the "use client" directive as the very first line, before any imports:

"use client";

import { useTransition } from "react";

export default function MyComponent() {
  const [isPending, startTransition] = useTransition();
  // ... rest of your component
}

The directive must be at the top of the file (before imports) and uses double quotes. This tells React and Next.js that this component and all its child components should be treated as Client Components.

Before adding "use client", confirm that your component actually requires client-side features. Ask yourself:

- Does it need to handle user interactions (clicks, form inputs)?
- Does it manage client-side state with useState or useTransition?
- Does it use browser APIs or effects?

If the answer is yes, proceed with the "use client" directive. If not, consider refactoring to use Server Actions or moving the interactive logic to a separate Client Component:

// Server Component (parent)
import ClientButton from "./ClientButton";

export default function Page() {
  return (
    <div>
      <h1>Server-rendered content</h1>
      <ClientButton /> {/* Only this is a Client Component */}
    </div>
  );
}

If only part of your component needs useTransition, separate it into a smaller Client Component to minimize the JavaScript bundle sent to the client:

// app/components/TransitionButton.tsx (Client Component)
"use client";

import { useTransition } from "react";

export function TransitionButton({ onUpdate }: { onUpdate: () => Promise<void> }) {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      onClick={() => startTransition(() => onUpdate())}
      disabled={isPending}
    >
      {isPending ? "Updating..." : "Update"}
    </button>
  );
}

// app/page.tsx (Server Component)
import { TransitionButton } from "./components/TransitionButton";

export default function Page() {
  async function handleUpdate() {
    "use server";
    // Server Action logic
  }

  return <TransitionButton onUpdate={handleUpdate} />;
}

This pattern keeps most of your component as a Server Component while isolating the interactive part.

If the error persists after adding "use client", verify that you are not importing the component into a Server Component or that custom hooks are properly marked:

// hooks/useCustomTransition.ts
"use client"; // Custom hooks also need this directive

import { useTransition } from "react";

export function useCustomTransition() {
  const [isPending, startTransition] = useTransition();
  // ... custom logic
  return { isPending, startTransition };
}

Ensure every file in the chain from your page to the hook has "use client" or is properly imported into a Client Component boundary.

If you need transition behavior outside of a component (such as in utility functions or event handlers defined outside components), use the standalone startTransition function instead:

import { startTransition } from "react";

// This can be used outside components
export function updateWithTransition(callback: () => void) {
  startTransition(() => {
    callback();
  });
}

Note that startTransition does not provide the isPending flag. Use it when you only need to mark updates as transitions without tracking loading state.

After adding the "use client" directive, clear the Next.js build cache and restart the development server to ensure changes are recognized:

rm -rf .next
npm run dev

For production builds:

rm -rf .next
npm run build
npm run start

Next.js caches component metadata, and stale cache can sometimes cause the error to persist even after fixing the code.

Confirm that your component is properly registered as a Client Component by checking the browser DevTools:

1. Open React DevTools in your browser
2. Locate your component in the component tree
3. Check for the component name - Client Components are rendered with their actual names, while Server Components may show as serialized data
4. Verify that useTransition returns valid [isPending, startTransition] values

You can also add a console.log to verify execution context:

"use client";

import { useTransition, useEffect } from "react";

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

  useEffect(() => {
    console.log("Running on client:", typeof window !== "undefined");
  }, []);

  return <div>Client Component</div>;
}

If the console.log shows true, your component is correctly running on the client.