TypeScript · performance

no-unnecessary-use-client

eslint:no-unnecessary-use-client

Flag `'use client'` files with no hooks or event handlers — they could be RSC.

Why

An unnecessary client boundary sends the component and its transitive dependencies to the browser without using client-only behavior.

Remove the directive, or keep it only when the module uses a supported client-side API or boundary dependency.

Executed by this rule’s unit tests.

Before

src/banner.tsx · focus

'use client'; export default function X() { return <div>hello</div>; }

After

src/counter.tsx · focus

'use client'; import { useState } from 'react'; export default function X() { const [n] = useState(0); return <div>{n}</div>; }

Client need is inferred from recognized hooks, handlers, browser globals, exports, classes, and known client-only imports.

unnecessaryUseClient