AceDevHub
Advanced React Interview QuestionsAdvancedConcept

React · Question 91

What does the 'use client' directive actually mark?

Direct answer

'use client' marks a module as a Client Component boundary so that it and the client-side dependency graph reachable from that boundary can participate in browser execution.

Counter.jsx
"use client";

import { useState } from "react";

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

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

You do not need to put "use client" in every component file. It defines a boundary; modules imported through that client graph are handled as client-side code by an RSC-compatible bundler.