React 19+ · Directive

use client

The 'use client' directive marks a module and its transitive dependencies as client code in React Server Components. It creates a server-client boundary so interactive components can run in the browser.

How it works

Place the directive at the beginning of a module to establish a server-to-client boundary. The module and its transitive dependencies become client code, enabling browser interactivity such as state and event handlers; values crossing from server-evaluated modules must be components or supported serializable props.

Syntax

'use client';

Key points

The directive identifies a module as client-side code in React Server Components.
Its client classification propagates through the module’s dependency subtree.
A compatible bundler uses the import as the split between server and browser execution.
Components declared in the marked module are treated as Client Components.
Without the directive or a client dependency relationship, component usage is considered server-side.

Common mistakes

Put the directive before imports and executable code; comments may appear before it.
Adding the directive to an already client-rendered dependency does not create another meaningful boundary.
Do not pass arbitrary non-serializable values from server-evaluated modules across the boundary.

Example: A client component

'use client';

import { useState } from 'react';

export default function Counter({ initial = 0 }: { initial?: number }) {
  const [count, setCount] = useState(initial);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

This module is compiled as client code, so the component can use state and event handlers.

When to use it

Enable interactive UI

A component needs useState, event handlers, or other browser-side interactivity.

Split server and client rendering

A server-rendered tree needs to include a browser-executed subtree.

Define a client dependency subtree

A shared module contains dependencies that must be bundled for the browser.

Interview questions

QWhat does 'use client' do?

It marks a module as client code for React Server Components. The module’s transitive dependencies are also evaluated on the client, and a compatible bundler treats the import as a server-client boundary.

Follow-up: Does every component used below a client component need its own directive? No; transitive dependencies are already client code, so another directive is unnecessary.

QWhere must the directive appear, and when is it redundant?

The directive must occur at the very beginning of the file, above imports or other code; comments are allowed before it. It has no effect when the module is imported from another client-rendered module.

Follow-up: Can a module without the directive still run on the client? Yes. A component can be evaluated on the client when it is a transitive dependency or is imported and used by a Client Component.

QWhat can cross from a server module into a client module?

Server-evaluated modules may import values from a client module only when those values are React components or supported serializable prop values intended for a Client Component. This keeps the server-client boundary transferable.

Follow-up: Why does this restriction matter? The boundary must carry data that the client-side component model and compatible bundler can represent across environments.

use server
Server Components
Client Components
React Server Components

Source: 'use client' directive – React. Checked 2026-10-15.