use client Overuse

"use client" on files that don't use any client-side APIs

infoAI Qualityuse-client-overuse

Why this matters

AI tools add 'use client' as a fix for any error, even when the component doesn't need client-side features. This unnecessarily increases your JavaScript bundle and disables server-side rendering.

✗ Bad

"use client";

// No useState, useEffect, onClick, or browser APIs
export function UserCard({ name, email }: Props) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

✓ Good

// No "use client" — this is a server component
export function UserCard({ name, email }: Props) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

How to fix

Remove 'use client' from components that don't use hooks (useState, useEffect), event handlers (onClick), or browser APIs (window, document). Let them render on the server.

All rules