Client Components

Client Components are any components that require browser-only logic. They add JS to the client bundle and must hydrate.

What makes a component a Client Component

• "use client" at the top of the file.
• React hooks like useState, useEffect, useReducer, useRef.
• Browser APIs: window, document, localStorage.
• Event handlers like onClick, onChange, onSubmit.

How Next.js decides

• Any file with "use client" in its module graph.
• Client Component importing a Server Component is invalid.
• Server Component importing a Client Component is allowed.

Bundle impact

• Code ships to the client bundle and hydrates.
• More client components means more JS and slower TTI.
• Client Components are not cached like RSC.

Minimal example

"use client";
export default function Counter() {
  const [value, setValue] = useState(0);
  return <button onClick={() => setValue(value + 1)}>{value}</button>;
}