---
title: Push "use client" Down
impact: HIGH
impactDescription: keeps parent as server component, reduces client bundle
tags: rerender, rsc, use-client, bundle, custom
---

# Push "use client" Down

Keep parent as Server Component. Only mark the smallest interactive leaf as Client Component.

```tsx
// BAD: entire page is client-side
"use client"
export default function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCartButton product={product} />
    </div>
  )
}

// GOOD: only interactive part is client
export default function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCartButton product={product} />
    </div>
  )
}
// AddToCartButton.tsx
"use client"
export function AddToCartButton({ product }) {
  const [loading, setLoading] = useState(false)
  return <button onClick={() => addToCart(product)}>Add to Cart</button>
}
```

Only use "use client" when the component uses hooks, event handlers, or browser-only APIs.