Client Component Detector
Detect why a React component needs the 'use client' directive in Next.js
About this ToolHow it works, benefits & use casesTap to collapse
In the Next.js App Router, components are Server Components by default, and forgetting (or unnecessarily adding) the 'use client' directive is a common source of confusing errors. Paste a component here and this detector tells you whether it needs to run on the client and, more usefully, why. It scans the source for client-only signals: React hooks (useState, useEffect, useLayoutEffect, useReducer, useRef), event handlers matched by the on[A-Z] pattern — listing the specific ones it found — browser APIs (window, document, localStorage, sessionStorage, navigator), Context API usage via useContext, and custom hooks that may pull in client features. The result is a verdict banner plus a numbered list of every reason, so instead of guessing you get a concrete checklist of what would have to change to make the component server-renderable. When nothing client-only is detected, it confirms the component can stay on the server and reminds you of the benefits. All analysis runs in your browser.
How to Use
- 1Paste your full component source into the "React Component Code" box, including any existing 'use client' directive, or click "Load example".
- 2Click "Analyze Component".
- 3Read the verdict: "Requires use client" with a numbered reason list, or "Can be a Server Component" when nothing client-only is found.
- 4Use the numbered Client Requirements to see exactly which hooks, handlers, or APIs force client rendering.
- 5If it can be a Server Component, review the listed benefits, or jump to the Server Component Converter to produce the cleaned-up code.
Key Benefits
- Explains why a component needs 'use client' with a numbered, specific reason list
- Names the exact event handlers it finds (for example onClick, onChange) rather than a generic warning
- Checks hooks, browser APIs, useContext, and custom hooks in one pass
- Confirms when a component is already server-safe so you can drop the directive
- Helps trim client-side JavaScript by spotting components that do not need it
- Links directly to the Server Component Converter for the next step
- Runs entirely in the browser — paste sensitive component code without it leaving your machine
Common Use Cases
- Diagnosing a "use client" or hydration error during App Router development
- Auditing whether a component truly needs to be a Client Component
- Finding leaf components that can move to the server to shrink the bundle
- Reviewing a teammate's component before approving a Server/Client boundary
- Learning which React features are client-only in the Next.js App Router
Paste the full component source — including any 'use client' directive.
What We Check
- React hooks (useState, useEffect, useReducer, etc.)
- Event handlers (onClick, onChange, onSubmit, etc.)
- Browser APIs (window, document, localStorage, etc.)
- Context API usage (useContext)
- Custom hooks that may use client features
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- TypeScript FormatterFormat and beautify TypeScript code
- Component Name GeneratorTurn a description into ranked, kind-aware component names with a file scaffold and a name validator (casing, collisions, clarity)
- SVG to React ComponentConvert SVG to a clean TSX/JSX/React Native component — currentColor, prop spread, forwardRef, memo, live preview
- Container Queries GeneratorDesign CSS @container queries with a live, resizable preview — export CSS, SCSS, and Tailwind v3 + v4
- Package.json GeneratorBuild a complete package.json with framework presets, scripts, deps, exports map, engines, and live validation
- Vercel Config GeneratorBuild vercel.json — redirects, rewrites, headers (with security quick-add), crons, regions — with live JSON, presets, and a conflict audit
It checks five categories: React hooks (useState, useEffect, useLayoutEffect, useReducer, useRef), event handlers matched by the on[A-Z] pattern, browser APIs (window, document, localStorage, sessionStorage, navigator), Context API usage via useContext, and custom hooks of the form const x = useSomething(). Each match becomes a numbered reason in the result.
No. The verdict is based on the actual client-only features it detects in the code, not on whether the directive is present. That means it can tell you a component already marked 'use client' would in fact run fine on the server, or that one without the directive really does need it.