Client Component: Interaktif di Browser

Kapan butuh Client Component?

Setiap kali komponen butuh sesuatu yang hanya ada di browser: useState, useEffect, onClick, localStorage, atau window. Tanpa "use client", memakai hook tersebut akan error karena Server Component tidak punya konsep state.

Cara menandai

Tambahkan "use client" di baris paling atas file, sebelum import apa pun:

// app/counter.tsx
"use client";

import { useState } from "react";

export default function Counter() {
  const [angka, setAngka] = useState(0);

  return (
    <div>
      <p>Nilai: {angka}</p>
      <button onClick={() => setAngka(angka + 1)}>Tambah</button>
    </div>
  );
}

Aturan komposisi

Client Component bisa me-render Server Component sebagai children, tapi tidak bisa meng-import-nya langsung. Pola yang benar:

// app/page.tsx (Server Component)
import Counter from "./counter";
import InfoServer from "./info-server";

export default function Page() {
  return (
    <Counter>
      <InfoServer /> {/* diteruskan sebagai children, tetap server */}
    </Counter>
  );
}

Jaga batas sekecil mungkin

Jangan menandai halaman besar sebagai Client Component hanya karena satu tombol butuh state. Pecah tombolnya jadi komponen kecil bertanda "use client", sisanya tetap Server Component. Makin kecil batas client, makin sedikit JavaScript yang diunduh browser.

Kesalahan umum pemula

• Lupa "use client" lalu pakai useState. Error-nya jelas ("useState only works in Client Components"), tapi pemula sering bingung. Solusinya satu baris di atas file.
• Menaruh "use client" bukan di baris pertama. Directive harus baris paling atas, sebelum import. Kalau di bawah import, tidak berfungsi.
• Meng-import Server Component langsung di Client Component. Ini tidak boleh. Teruskan sebagai children dari parent Server Component.

Latihan singkat

1. Buat komponen accordion (buka-tutup) sebagai Client Component dengan useState.
2. Buat halaman Server Component yang fetch daftar FAQ dummy, lalu teruskan ke accordion sebagai children.

Rangkuman

• "use client" ditulis di baris paling atas file, sebelum import.
• Wajib untuk useState, useEffect, onClick, dan API browser.
• Client Component bisa menerima Server Component sebagai children, tapi tidak meng-import langsung.
• Pecah bagian interaktif sekecil mungkin agar bundle tetap ringan.

Catatan teknis: Props yang dikirim dari Server Component ke Client Component harus bisa di-serialize (string, number, array, object polos). Fungsi, class instance, atau Date tidak bisa lewat batas ini dan akan error atau berperilaku aneh.