Toggle dan Form Lancar dengan Cara Menggunakan useState di Next Js

Ditulis oleh Next.js

Cara menggunakan useState di Next.js App Router adalah membuat Client Component dengan use client di baris pertama, lalu import useState dari React. State default di folder app berjalan sebagai Server Component sehingga hook ini langsung error kalau dipanggil di sana.

Kenapa useState Error di Server Component

Semua file di App Router berstatus Server Component kecuali dideklarasikan sebaliknya. Server Component merender di server dan tidak menyimpan state interaktif antar klik.

React menolak useState di Server Component karena tidak ada siklus render ulang di browser. Pesan errornya biasanya meminta memakai Client Component.

  • Komponen memakai onClick, onChange, atau onSubmit.
  • Komponen menyimpan toggle, tab aktif, modal terbuka, atau isi input.
  • Komponen membaca window, document, atau localStorage.

Langkah Cara Menggunakan useState di Next Js

1. Tambahkan use client tepat di baris pertama file, tanpa baris kosong atau komentar sebelumnya.

2. Import useState dari react dan tentukan nilai awal, misalnya useState(0), useState(false), atau useState('').

3. Tampilkan state di JSX dan ubah lewat event seperti onClick untuk tombol atau onChange untuk input.

4. Gunakan pola komponen kecil berikut untuk counter, toggle, dan form:

'use client';
import { useState } from 'react';

export default function PanelInteraktif() {
  const [count, setCount] = useState(0);
  const [nyala, setNyala] = useState(false);
  const [nama, setNama] = useState('');

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

      <button onClick={() => setNyala((v) => !v)}>
        {nyala ? 'Matikan' : 'Nyalakan'}
      </button>

      <input
        value={nama}
        onChange={(e) => setNama(e.target.value)}
        placeholder="Nama"
      />
    </div>
  );
}

BACA JUGA:

Pola Update State yang Aman

Pakai updater function setCount((v) => v + 1) untuk klik cepat beruntun. Nilai sebelumnya selalu terbaca dari antrean React, bukan dari closure lama.

Untuk object, salin field lain dengan spread sebelum mengganti satu field. Tanpa spread, field seperti email bisa hilang saat name diubah.

Pola Contoh Kasus Catatan
Updater function Counter dan toggle Aman untuk update berurutan
Spread object Form nama dan email Cegah field lain terhapus
State string terkontrol Input pencarian Hubungkan value dan onChange

Kesalahan Umum useState di App Router

  • Lupa menulis use client sehingga halaman Server Component ikut error.
  • Mengangkat state form ke layout server agar awet, padahal Server Component tidak bisa menampungnya.
  • Menyimpan token, password, atau harga final hanya di state client tanpa cek ulang.

Pisahkan bagian interaktif menjadi komponen client kecil, misalnya SearchBox.jsx atau CartButton.jsx. Layout dan halaman tetap server agar fetch data dan metadata tetap cepat.

Validasi form di server tetap wajib, misalnya lewat Server Action. Validasi browser mudah dilewati dan tidak boleh dipercaya untuk data penting.

FAQ

Apakah useState bisa dipakai di Server Component Next Js?

Pindahkan kode state tersebut ke Client Component yang diawali use client.

Di mana menyimpan state agar tidak hilang pindah halaman?

Angkat state ke layout atau template client yang membungkus halaman tersebut.

Apakah useState cocok untuk data fetch server?

Ambil data di Server Component, lalu kirim hasilnya sebagai props awal ke komponen client.

Artikel Terkait