Client Components behave like classic React: they hydrate in the browser, use hooks, handle events, and access browser APIs. Any interactive UI—buttons, forms with instant validation, charts—lives here.
When you need the client
- Event listeners (
onClick,onChange) - State and lifecycle hooks
- Browser APIs (geolocation,
localStorage) - Effects that run only in the browser
Boundary rule
Push 'use client' as deep as possible—wrap only the interactive leaf, not the entire page. Server parents can render client children; keep data fetching on the server when you can.
Playground
The editor runs Client Component code directly. Write 'use client' like production code; the runner strips it so TSX executes in the iframe.
Self-check
- Why should most of a page stay a Server Component?
- Give one UI element that must be a Client Component.
Challenge
Interactive counter
- Click the button and confirm the count increases.
- Add a Reset button that sets count to 0.
Done when: counter increments and resets correctly in the preview.