needs useState React Origin: On your device Last updated 14 Oct 2026

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client"

In the Next.js App Router, a component using hooks or browser APIs is rendered as a Server Component.

Exact message you may see It only works in a Client Componentneeds useStatenone of its parents are marked with "use client"
Explore the map of this error Full error map →
Seen on: React

Meaning

App Router components are server components by default. Hooks (useState, useEffect), event handlers and browser APIs require "use client" at the top of the file.

Common causes

  • Missing "use client" in a file using hooks
  • Third-party component without "use client" imported into a server component
  • Context providers in layout.tsx without a client wrapper

⚡ Quick fix

  1. Add "use client" as the first line of the component file
  2. Wrap third-party client components in your own "use client" file
  3. Move providers into a client Providers component

Detailed fix by platform

React

  1. jsx
    "use client";
import { useState } from "react";

How to diagnose

  1. File — Does it start with "use client"?
  2. Import — Which hook/component triggered it?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

async Client Component — Error: async/await is not yet supported in Client Components, only Server Components. (React)async Client ComponentCan't resolve 'fs' — Module not found: Can't resolve 'fs' (Next.js / webpack 5) (React)Can't resolve 'fs'Dynamic server usage — Error: Dynamic server usage: Route /x couldn't be rendered statically because it used `cookies` (React)Dynamic server usageFunctions cannot be passed — Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". (React)Functions cannot be p…Hydration failed — Error: Hydration failed because the initial UI does not match what was rendered on the server (React)Hydration failednext/image hostname — Error: Invalid src prop on `next/image`, hostname "x" is not configured under images in your `next.config.js` (React)next/image hostnameNextRouter was not mounted — Error: NextRouter was not mounted. (React)NextRouter was not mo…Prerender error — Error occurred prerendering page "/x". Read more: https://nextjs.org/docs/messages/prerender-error (React)Prerender errorneeds use…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.