The use client Directive
A component becomes a Client Component when its module begins with the use client directive.
Client Components are appropriate when code needs browser APIs, event handlers, local state, effects, or client-side libraries that depend on the DOM.
The directive defines a boundary. Everything imported into that client boundary must be compatible with client execution. This means use client should not be added casually to large parent components.
Interactive Client Component
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}💡 useState and event handlers require browser-side React behavior, so the component must be a Client Component.
Key Takeaways
- Use
use clientonly when browser-side interactivity is required. - Client boundaries should be as small as practical.
- Do not turn an entire application into Client Components unnecessarily.