Next.jsReact

useState / useEffect only works in a Client Component

You're importing a component that needs useState. This React hook only works in a Client Component.

In short: In the Next.js App Router, files are Server Components by default. Hooks and event handlers need a Client Component.

Why it happens

AI tools often generate a component with useState, useEffect, onClick, or a context provider and drop it into the app/ folder without the "use client" directive. Server Components can't hold state or attach browser event handlers.

How to fix it

1. Open the component that uses the hook (the error names it). Add "use client"; as the very first line of that file.
2. Keep the directive as low in the tree as possible: make the small interactive piece a Client Component and leave pages and layouts as Server Components.
3. For context providers, create app/providers.tsx with "use client" and wrap {children} with it in layout.tsx.
4. If a Server Component passes a function (like onClick) to a Client Component, move that handler inside the Client Component instead.

Example

"use client";
import { useState } from "react";
export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Copy-paste fix prompt

I'm getting this error in my app:

You're importing a component that needs useState. This React hook only works in a Client Component.

[Paste the full error, stack trace, and the file it points to here]

Likely cause: In the Next.js App Router, files are Server Components by default. Hooks and event handlers need a Client Component.

Task: Identify the smallest component that uses hooks, context, or event handlers and mark only that file with "use client". Leave pages and layouts as Server Components.

Rules:
- First explain the root cause in 2 sentences and list the files you'll change.
- Make the smallest change that fixes it. Don't refactor unrelated code.
- Don't disable security or checks (RLS, auth, signature verification, type checking, CORS allow-all) to make the error disappear.
- Never print or hard-code secret keys.
- Finish by telling me exactly how to verify the fix.

Common with: Cursor, v0, Claude Code. Last reviewed 2026-11-13.