client-vs-server-componentlisted

# client-vs-server-component Use when creating any React 19 component in a project that supports Server Components (Next.js App Router, similar). The choice is **not** "type 'use client' if the component is interactive" — that's the lazy heuristic that leads to 80% of the app shipping to the browser. ## The default **Server Component (no `'use client'`) by default.** Add `'use client'` only when you need browser-only APIs: - React state hooks: `useState`, `useReducer`, `useContext`, `useRef` - Effects: `useEffect`, `useLayoutEffect` - Browser APIs: `window`, `document`, `localStorage`, `IntersectionObserver` - Event handlers attached at component level (`onClick`, `onChange`, `onSubmit`) - Third-party libraries that use any of the above If your component does **none** of these — even if it ends up inside a Client Component — leave it server. RSC composition lets you pass server-rendered children into client wrappers. ## The boundary placement rule Push `'use client'` **as far down the tree as possible**. Bad pattern: ```tsx // ✗ app/dashboard/page.tsx 'use client'; // entire page becomes client import { useState } from 'react'; import { UserList } from './UserList'; // also becomes client, even if it didn't need to export default function Page() { const [filter, setFilter] = useState(''); return ( <> <input value={filter} onChange={(e) => setFilter(e.target.value)} /> <UserList filter={filter} /> </> )