"use client" Directive

Definition

A specific pragma in React 18+ that defines a boundary between the server-only code and client-side code.

Explain Like I'm New

It's like a border checkpoint. When Next.js is bundling your code on the server, it bundles everything freely. The moment it sees a file with `'use client'`, it stops, packages that file (and everything it imports) into a JavaScript bundle, and sends it across the network to the browser.

Real World Example

Putting `'use client'` at the top of a `Carousel.tsx` component file because it imports a heavy 3rd-party slider library that requires the browser's DOM to function.

Common Use Cases

•Defining network boundaries
•Using third-party React libraries

Interactive Example

/* 
  File: components/SearchInput.tsx 
*/
'use client'; // This is the boundary!

// Even though we didn't write 'use client' inside SearchDropdown,
// because it is imported into a Client boundary, it is treated as a Client Component.
import { SearchDropdown } from './SearchDropdown'; 

export function SearchInput() {
  return (
    <div>
      <input type="text" onChange={(e) => console.log(e)} />
      <SearchDropdown />
    </div>
  )
}

Interview Questions

basic

If Component A has `'use client'` and imports Component B, does Component B also need the `'use client'` directive?

intermediate

Why shouldn't you just put `'use client'` at the top of your `layout.tsx` file and make the whole app client-side?

Flash Cards

Question

Does Component B need it?

Click to reveal answer

Answer

No. The `'use client'` directive defines a boundary. Once you cross the boundary, every component imported underneath it automatically becomes a Client Component too.

Question

Why not at the top?

Click to reveal answer

Answer

Because you would completely destroy all the performance and security benefits of Server Components. You would force the user to download a massive JavaScript bundle containing your entire application's code, leading to terrible load times.