Suggest an editImprove this articleRefine the answer for “What tasks are best solved with client components?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)Client components in Next.js should be used for tasks where the interface must **react to user actions in the browser**. In short: everything "live" and interactive is the client. **Key point:** if you need `useState`, `useEffect`, or `onClick` - it's a client component.Shown above the full answer for quick recall.Answer (EN)ImageClient components in Next.js should be used for tasks where the interface must **react to user actions in the browser**. In short: everything "live" and interactive is the client. --- ## Short answer (for an interview) **Client components are better suited for:** - interactive UI - managing interface state - working with browser APIs - effects and animations If you need `useState`, `useEffect`, or `onClick` - it's a client component. --- ## 1. User actions and interactivity Buttons, clicks, events: ```tsx 'use client' export function LikeButton() { return <button onClick={() => alert('Like')}>Like</button> } ``` Also included here: - forms - submit - hover - drag & drop --- ## 2. Managing UI state When you need to store state: - whether a modal is open - whether a tab is selected - an input's value - the current filter ```tsx 'use client' const [isOpen, setIsOpen] = useState(false) ``` Server components **cannot store UI state**. --- ## 3. Forms and live validation - controlled inputs - validation on the fly - showing errors - autofill ```tsx 'use client' <input value={email} onChange={...} /> ``` Even if the form submission goes to the server, **the form's UI is client-side**. --- ## 4. Effects and lifecycle If you need: - `useEffect` - subscriptions - timers - WebSocket - polling ```tsx 'use client' useEffect(() => { const id = setInterval(...) return () => clearInterval(id) }, []) ``` --- ## 5. Working with browser APIs Only client components can work with: - `window` - `document` - `localStorage` - `sessionStorage` - `navigator` - `IntersectionObserver` ```ts localStorage.getItem('theme') ``` --- ## 6. Animations and UI libraries Most UI libraries **require the client**: - modals - dropdowns - tooltips - popovers - animations (Framer Motion, etc.) That's why it's common to make: - a server layout - client UI widgets inside it --- ## 7. Client state and stores If you use: - Redux - Zustand - React Context (for UI) - SWR / React Query (on the client) These are client components. --- ## Typical tasks - a short list - buttons and forms - modal windows - dropdown / tabs - filters and sorting in the UI - animations - live validation - client stores - effects and subscriptionsFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.