use client

Core Idea

'use client' (feature do React) declara um entry point para componentes renderizados no client side, usado quando a UI precisa de interatividade (state, event handlers, browser APIs). Define a fronteira server/client: os componentes exportados do arquivo viram entry points para o client.

Key Concepts

• Entry point, não propagação total: não precisa adicionar 'use client' em todo arquivo que contém Client Components, só nos arquivos cujos componentes você quer renderizar diretamente dentro de Server Components.
• Posição: sempre no topo do arquivo, antes de qualquer import.
• Serializable props: props de Client Components devem ser serializáveis (React RSC); funções comuns como onClick passadas de fora não são serializáveis.

Code Examples

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

• O que demonstra: entry point client básico usando useState, directive no topo antes de qualquer import.

import Header from './header'
import Counter from './counter' // This is a Client Component

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

• O que demonstra: composição de Server Component (Header) com Client Component (Counter) na mesma página.

Anti-patterns

• Passar função não serializável como prop para Client Component: ex. onClick vindo de fora não é serializável, quebra a fronteira server/client.
• Adicionar 'use client' em todo arquivo por precaução: desnecessário e aumenta o bundle client; use só nos arquivos que precisam ser entry point.

Key Takeaways

1. 'use client' sempre fica no topo do arquivo, antes de imports, sem exceção de posicionamento inline.
2. Use Server Components para conteúdo estático/SEO/data fetching, Client Components só para o que exige interatividade.
3. Componha aninhando Client Components dentro de Server Components conforme necessário, sem precisar marcar toda a árvore como client.

Connects To

• Directives (ch099): visão geral das três directives, incluindo 'use client'.
• use server (ch104): contraparte que expõe Server Functions.