Stop Loop: Cara Mengatasi Maximum Update Depth Exceeded Next Js

Ditulis oleh Next.js

Error Maximum update depth exceeded berarti komponen me-render dirinya sendiri berulang tanpa berhenti. Hentikan dulu pemicu loopnya: pindahkan setState keluar dari badan render dan beri useEffect array dependency yang benar. Di Next.js App Router, pola paling sering muncul di Client Component yang membaca useSearchParams lalu langsung menulis state atau memanggil router.replace di setiap render.

Penyebab Maximum Update Depth Exceeded di React dan Next.js

React membatasi jumlah render beruntun untuk mencegah browser macet. Loop biasanya berasal dari kode yang mengubah state setiap kali komponen tampil.

  • setState dipanggil langsung di badan render, bukan di event handler atau efek.
  • useEffect tanpa dependency tepat sehingga efek jalan, mengubah state, lalu memicu efek yang sama lagi.
  • Dependency berupa objek atau fungsi baru di setiap render, misalnya { page: 1 } inline atau fungsi tanpa useCallback.
  • Navigasi berulang seperti router.refresh(), router.replace(), atau update context di dalam efek yang sensitif terhadap search params.
  • Server Component tidak memakai hook, tetapi Client Component yang diimpornya bisa menjadi sumber loop.

Tabel Diagnosis Cepat Berdasarkan Pola Error

Cocokkan momen munculnya error sebelum mengubah kode.

Pola Penyebab Solusi
Error langsung saat load setState di badan render Pindah ke event atau efek berdependency
Error setelah klik atau input Update context memicu render induk Persempit state dan pecah komponen
Error saat navigasi search params Efek fetch dan replace URL saling memicu Baca params sekali, tulis URL bersyarat

BACA JUGA:

Cara Menghentikan Loop Render Langkah demi Langkah

Ikuti urutan ini agar perbaikan tidak menebak-nebak.

  1. Baca stack trace di terminal atau browser, lalu isolasi komponen paling atas yang disebut berulang.
  2. Pindahkan setState ke event handler. Biarkan render hanya menghitung tampilan, bukan mengubah state.
  3. Perbaiki dependency useEffect. Sertakan hanya nilai yang benar-benar dibaca efek tersebut.
  4. Stabilkan fungsi dan objek dengan useCallback atau useMemo bila identitas baru tiap render memicu efek.
// Sebelum: loop karena setState di render
function Daftar({ query }) {
  const [hasil, setHasil] = useState([]);
  setHasil(cariData(query));
  return <ul>{hasil.map((x) => <li key={x}>{x}</li>)}</ul>;
}

// Sesudah: state berubah hanya saat query berubah
function Daftar({ query }) {
  const [hasil, setHasil] = useState([]);
  useEffect(() => {
    setHasil(cariData(query));
  }, [query]);
  return <ul>{hasil.map((x) => <li key={x}>{x}</li>)}</ul>;
}

FAQ

Apakah useEffect tanpa array dependency selalu salah?

Tidak, tetapi efek tanpa dependency berjalan setiap render sehingga berbahaya bila isinya mengubah state.

Kenapa error muncul setelah pakai useSearchParams?

Komponen membaca params, menulis state atau URL baru, lalu render ulang membaca nilai baru yang memicu siklus sama.

Kapan perlu memecah komponen untuk memutus loop render?

Pecah komponen bila state kecil di anak terus me-render ulang induk besar melalui context atau props callback.

Artikel Terkait