LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 2217 min read

Client Components

Learn when and how to opt into Client Components for state, effects, and interactivity.

What Is a Client Component?

A Client Component is a component that opts out of the server-only default by adding the "use client" directive at the very top of its file. It still renders once on the server for the initial HTML, but it also ships its JavaScript to the browser so it can become interactive there.

When to Use a Client Component

Reach for "use client" when a component needs:

  • State — useState or useReducer.
  • Effects — useEffect or useLayoutEffect.
  • Event handlers — onClick, onChange, onSubmit, and similar.
  • Browser-only APIs — window, localStorage, geolocation.
  • Third-party libraries that assume a browser environment (many chart or animation libraries).
  • React context providers with client-side state (e.g. a theme toggle).

They Still Render on the Server First

A common misconception is that "use client" means "this only runs in the browser." In reality, Next.js still renders a Client Component to HTML on the server for the initial page load — "use client" means the component's JavaScript is also sent to the browser and hydrated there, not that server rendering is skipped.

Hydration

Hydration is the process where React attaches event listeners and makes the already-rendered server HTML interactive in the browser, without re-creating the DOM from scratch.

Example

// app/components/Counter.tsx
'use client';


import { useState } from 'react';


export default function Counter() {
  const [count, setCount] = useState(0);


  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

The "use client" directive applies to this file and everything it imports beneath it in the tree — but a Client Component can still receive Server Components as children, which is exactly what the composition patterns lesson explores next.

Common Beginner Mistakes

Putting "use client" in the wrong place

It must be the very first line of the file, before any imports — otherwise Next.js will not treat the module as a Client Component boundary.

Marking a whole page "use client" just for one button

Extract the interactive button into its own small Client Component instead, and keep the rest of the page a Server Component.

FAQs

Yes for components imported and rendered directly inside that file's tree, but a Client Component can still accept other Server Components as children/props — the boundary isn't all-or-nothing for the whole app.

Yes, that still works exactly like plain React — but for initial data, fetching in a Server Component further up the tree and passing it down as props is usually faster and simpler.

Summary

Client Components add interactivity by shipping JavaScript to the browser, while still benefiting from an initial server render. Next, you'll look closely at the "use client" directive itself and exactly where the boundary it creates applies.

Next Lesson →

The "use client" Directive