01 Aug 2026

React adalah library JavaScript paling populer untuk membangun user interface. Tapi banyak pemula yang jatuh ke dalam jebakan yang sama saat belajar. Mari kita bahas 5 kesalahan fatal dan cara menghindarinya.

1. Mutating State Secara Langsung

Kesalahan paling klasik: mengubah state secara langsung alih-alih menggunakan setter function.

// ❌ Jangan lakukan ini
const [user, setUser] = useState({ name: "Andi", age: 25 });
user.age = 26; // Ini tidak akan memicu re-render!

// ✅ Lakukan ini
setUser({ ...user, age: 26 });

React menggunakan immutability untuk mendeteksi perubahan. Mutasi langsung membuat React tidak menyadari bahwa state telah berubah.

Tips: Selalu buat object/array baru saat mengupdate state. Gunakan spread operator (...) atau map/filter untuk array.

2. Salah Menggunakan useEffect

useEffect adalah hook yang sering disalahgunakan. Masalah paling umum:

Missing dependencies — ESLint memperingatkan tapi diabaikan
Infinite loop — update state di dalam useEffect tanpa dependency array yang benar
Menaruh logic yang tidak perlu di useEffect

// ❌ Infinite loop!
useEffect(() => {
  setCount(count + 1); // count berubah → useEffect jalan lagi → count berubah lagi...
});

// ✅ Gunakan functional update
useEffect(() => {
  setCount(prev => prev + 1);
}, []); // Dependency array kosong = jalan sekali saat mount

Tips: Sebelum menggunakan useEffect, tanyakan: "Apakah logic ini benar-benar side effect?" Banyak logic yang seharusnya ada di event handler atau di dalam render.

3. Tidak Memahami Closure di Event Handler

Ini jebakan halus yang sering muncul saat menggunakan state di dalam callback:

// ❌ State yang di-capture adalah nilai saat event handler dibuat
const handleClick = () => {
  setTimeout(() => {
    alert(count); // Selalu menunjukkan nilai lama!
  }, 3000);
};

// ✅ Gunakan ref atau functional update
const countRef = useRef(count);
countRef.current = count;

Tips: Pelajari konsep closure di JavaScript terlebih dahulu. Pemahaman closure akan membantu kamu memahami behavior React hooks dengan lebih baik.

4. Over-Engineering State Management

Tidak semua state perlu Redux atau Zustand. Banyak pemula langsung menginstall Redux padahal projectnya hanya butuh useState dan useContext.

Aturan praktis:

useState — State lokal dalam satu komponen
useContext — State yang dibutuhkan oleh beberapa komponen sibling
Zustand/Redux — State kompleks dengan banyak interaksi, atau perlu middleware/persist

"Jangan optimasi sebelum ada masalah. Start simple, scale when needed."

5. Mengabaikan Composition Pattern

React didesain dengan filosofi composition. Tapi banyak pemula yang membuat komponen "God Component" — satu komponen yang melakukan segalanya.

// ❌ God Component — semua dalam satu komponen
function Dashboard() {
  // 200+ baris JSX, semua fitur campur jadi satu
}

// ✅ Composition — pecah menjadi komponen kecil
function Dashboard() {
  return (
    <div>
      <Header />
      <Sidebar />
      <MainContent />
      <Footer />
    </div>
  );
}

Tips: Jika satu komponen melebihi 150 baris, pertimbangkan untuk memecahnya. Setiap komponen seharusnya memiliki satu tanggung jawab (Single Responsibility Principle).

Belajar React Lebih Cepat dengan Mentor

Belajar React sendiri bisa memakan waktu berbulan-bulan dengan banyak trial and error. Dengan mentor, kamu bisa:

Mendapatkan feedback real-time saat coding
Memahami best practices yang tidak ada di tutorial
Debugging bersama saat stuck
Review kode untuk meningkatkan kualitas

Kami menyediakan sesi Mentoring React 1-on-1 yang bisa disesuaikan dengan level kamu. Dari basic JSX hingga advanced patterns seperti compound components dan custom hooks.

👉 Booking Mentoring React