needs useState ⚛️ React

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.

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 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.