Client Components

## 1. Learning Objectives By the end of this lesson, you will be able to: - Explain what `"use client"` does. - Use Client Components for state, effects, and browser APIs. - Place client boundaries low in the tree. - Compose Client Components under Server Components safely. Difficulty: Beginner. ## 2. Prerequisites - React hooks. - Server Components. - App Router basics. ## 3. Overview A Client Component is a React component that runs in the browser after hydration. In Next.js, a file becomes a Client Component entry point when it starts with the `"use client"` directive. ## 4. Why This Topic Matters Most real apps need interactivity: buttons, modals, forms, tabs, charts, drag-and-drop, and browser APIs. Client Components provide that interactivity, but overusing them can increase bundle size and weaken server-rendering benefits. ## 5. Real-World Analogy If Server Components are prepared in the kitchen, Client Components are tools placed on the table: a pepper grinder, a call button, or a card reader. They are interactive, but you only bring them out when the diner needs them. ## 6. Core Concepts | Concept | Meaning | |---|---| | `"use client"` | Directive that marks a module as a Client Component entry point. | | Hydration | Browser attaches React behavior to rendered output. | | Client bundle | JavaScript sent to the browser for interactive code. | | Browser API | APIs like `window`, `localStorage`, and DOM events. | | Serializable props | Data passed from server to client that can be safely serialized. | ## 7. Syntax & API Reference

The directive belongs at the top of the file before imports. ## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? The page remains a Server Component, while only the toggle ships browser JavaScript. ## 10. Interactive Playground Try this: - Add `localStorage` usage inside a Client Component. - Move `"use client"` from the page to a child component. - Inspect how many components really need interactivity. ## 11. Common Mistakes | Mistake | Why It Happens | Correct Approach | |---|---|---| | Adding `"use client"` to a whole route | It fixes hook errors quickly. | Create a smaller Client Component. | | Passing non-serializable props | Server and client communicate through serialized data. | Pass primitives, objects, arrays, or IDs. | | Fetching all data in the client | SPA habit. | Fetch initial data on the server when possible. | ## 12. Best Practices - Use Client Components for state, effects, event handlers, and browser APIs. - Keep client boundaries small. - Pass IDs and plain data instead of server-only objects. - Keep data fetching in Server Components when it supports initial render. - Lazy-load heavy interactive widgets when appropriate. ## 13. Browser Compatibility | Feature | Browser Impact | Notes | |---|---|---| | Event handlers | Requires JavaScript | Hydration must complete. | | Browser APIs | Browser-only | Guard APIs that may not exist in all browsers. | | Client bundles | Network and parse cost | Keep them small. | ## 14. Interview Questions **Easy:** What directive creates a Client Component? Answer: `"use client"`. **Medium:** When do you need a Client Component? Answer: For React state, effects, event handlers, browser APIs, or interactive third-party widgets. **Hard:** Why should `"use client"` be pushed down the tree? Answer: Everything imported below a client boundary can become part of the client bundle, so small boundaries reduce shipped JavaScript. ## 15. Debugging Exercise Bug report: "This page fails because `localStorage` is not defined."

Solution Move the browser API access into a Client Component and read `localStorage` after hydration, usually inside `useEffect`. ## 16. Practice Exercises - Easy: Build a counter Client Component. - Medium: Add a modal inside a server-rendered page. - Hard: Convert a client-heavy settings page into server data plus client controls. ## 17. Scenario-Based Challenge A data table page is marked `"use client"` because filters are interactive. The table data is SEO-neutral but large. What is a better split? Walkthrough Fetch the table data in a Server Component, pass initial rows to a Client Component for filtering if needed, and keep only the filter controls and table interactions client-side. ## 18. Quick Quiz 1. Can Client Components use `useState`? Answer: Yes. 2. Can they use browser APIs? Answer: Yes, after hydration. 3. Should all pages be Client Components? Answer: No. 4. Does `"use client"` affect imports below it? Answer: Yes. 5. Can Server Components import Client Components? Answer: Yes. ## 19. Summary & Key Takeaways - Client Components power browser interactivity. - `"use client"` marks the client boundary. - Keep boundaries as small as practical. - Fetch initial data on the server when possible. - Pass serializable props across the boundary. ## 20. Cheat Sheet | Need | Client Component? | |---|---| | Button click state | Yes | | `useEffect` | Yes | | Database query | No | | Static heading | No | | Browser chart library | Yes | ## 21. Further Reading - Next.js Docs: Client Components. - Next.js Docs: Composition Patterns. - React Docs: State and Effects. ## 22. Next Lesson Preview Chapter 3 is complete. Next, you will learn data fetching, starting with the enhanced `fetch()` API in Next.js.