What is the "use client" directive, and when should it be used in an RSC architecture?

Short answer

It marks the boundary between server components and interactive client components that need State, Effects, or browser events.

Explanation

In an RSC architecture, components are Server Components by default. For user interaction (such as useState, useEffect, or onClick), put "use client" at the top of the file. Components imported into that file automatically become part of the browser bundle.

Code example

'use client';

import { useState } from 'react';

export function UpvoteButton() {
  const [votes, setVotes] = useState(0);

  return (
    <button onClick={() => setVotes(v => v + 1)}>
      Vote ({votes})
    </button>
  );
}

Common mistakes

• Putting "use client" at the top of the Root Layout, turning the entire app into CSR and losing server benefits.

Follow-up questions

• What are React Server Components (RSC), and how do they fundamentally differ from SSR?
• What is the new use() function in React 19, and how does it work with Promises and Context?

Sources

• React docs — use client