React Clean Code: 5 Kebiasaan Buruk yang Harus Dihindari

Halo, Sobat Ngoding! 👋

Pernah nggak kamu buka kodingan lama (atau punya temen), terus dalem hati bilang: “Ini apaan sih? Kok ruwet banget?” 😵‍💫

Bikin aplikasi React yang “jalan” itu gampang. Tapi bikin yang “mudah dibaca” dan “mudah dirawat” itu seni. Seringkali, kita, terutama pas masih junior, terjebak melakukan hal-hal yang bikin kodingan kita jadi spaghetti.

Hari ini, saya mau sharing 5 kebiasaan buruk yang harus segera kamu tinggalkan kalau mau naik level jadi Senior. Anggap aja ini sesi curhat senior di warkop sambil nyeruput kopi. ☕

Yuk, simak!

1. Komponen Kegedean (God Component)

Ini dosa paling umum. Satu file Dashboard.jsx, isinya 500 baris. Ada logika fetch data, ada tabel, ada modal, ada form edit, semuanya tumplek blek di situ.

Masalahnya: Susah dibaca, susah di-test, dan kalau mau benerin satu fitur, takut fitur lain rusak.

Solusinya: Pecah! Prinsipnya: Satu Komponen, Satu Tanggung Jawab.

// ❌ JANGAN: Satu komponen raksasa
const Dashboard = () => {
  // ... 500 baris logika ...
  return (
    <div>
      <Header />
      <div className="sidebar">...</div>
      <div className="content">
        <table>...</table>
        <form>...</form>
      </div>
    </div>
  );
};

// ✅ LAKUKAN: Pecah jadi komponen kecil
const Dashboard = () => {
  return (
    <Layout>
      <Sidebar />
      <UserTable />
      <EditUserForm />
    </Layout>
  );
};

Lihat kan? Lebih enak dilihat mata.

2. Prop Drilling (Ngoper Paket Estafet)

Kamu punya data di komponen App, tapi yang butuh itu komponen CucuDariCicit. Akhirnya kamu oper props-nya lewat 5 lapisan komponen yang sebenernya nggak butuh data itu.

Masalahnya: Komponen tengah jadi “kotor” karena nerima props yang nggak mereka pake. Kalau struktur berubah, capek benerinnya.

Solusinya: Gunakan Composition (pake children) atau Context API.

// ❌ JANGAN: Ngoper props lewat komponen yang gak peduli
<Dashboard user={user} />
// Dashboard cuma nerima 'user' buat dioper ke Navbar
<Navbar user={user} />
// Navbar cuma nerima 'user' buat dioper ke Avatar
<Avatar user={user} />

// ✅ LAKUKAN: Composition
<Dashboard>
  <Navbar>
    <Avatar user={user} />
  </Navbar>
</Dashboard>

3. Logika Ruwet di dalam JSX

JSX itu buat nampilin UI, bukan buat mikir berat. Jangan masukin logika javascript yang kompleks di dalam kurung kurawal {}.

Masalahnya: Susah dibaca. JSX kamu jadi penuh sama operator ternary ? : yang bertingkat-tingkat.

Solusinya: Ekstrak logika ke variabel atau fungsi kecil di atas return.

// ❌ JANGAN: Ternary operator bersarang yang bikin pusing
return (
  <div>
    {user && user.role === 'admin' ? (
      <AdminPanel />
    ) : user && user.isActive ? (
      <UserDashboard />
    ) : (
      <GuestView />
    )}
  </div>
);

// ✅ LAKUKAN: Simpan di variabel biar jelas
const renderContent = () => {
  if (!user) return <GuestView />;
  if (user.role === 'admin') return <AdminPanel />;
  return <UserDashboard />;
};

return <div>{renderContent()}</div>;

4. Hardcoded Values (Angka/String Ghaib)

Sering liat kodingan kayak gini? if (status === 2) { ... }

Angka 2 itu apa? Status sukses? Pending? Gagal? Cuma Tuhan dan kamu (saat nulis kode itu) yang tau. Seminggu kemudian, kamu juga lupa.

Masalahnya: Kalau statusnya berubah, kamu harus cari angka 2 di seluruh project.

Solusinya: Pake Constants atau Enums.

// ❌ JANGAN: Pake magic number/string
if (role === 'role_1') { ... }

// ✅ LAKUKAN: Definisikan konstanta
const ROLES = {
  ADMIN: 'role_1',
  USER: 'role_2'
};

if (role === ROLES.ADMIN) { ... }

5. Nama Variabel yang Pelit atau Lebay

Nama variabel itu dokumentasi. Jangan pelit: const d = ... (d itu data? date? dog?). Jangan lebay: const dataYangDiambilDariServerUntukDitampilkanDiTabel = ... (kepanjangan woy!).

Masalahnya: Membingungkan pembaca kode.

Solusinya: Jelas dan to the point.

• Boolean? Awali dengan is, has, should. (Contoh: isLoading, hasError).
• Fungsi? Pake kata kerja. (Contoh: handleSubmit, fetchUser).

// ❌ JANGAN
const [flag, setFlag] = useState(false);
const h = () => { ... }

// ✅ LAKUKAN
const [isModalOpen, setIsModalOpen] = useState(false);
const handleCloseModal = () => { ... }

Penutup

Kodingan bersih itu bukan cuma buat gaya-gayaan. Itu adalah bentuk rasa sayang kita ke diri sendiri (dan tim) di masa depan.

Mulai dari hal kecil. Pecah komponen, kasih nama variabel yang bener, dan jangan males refactor. Ingat, kode yang kita tulis hari ini akan kita maintain besok. Jangan bikin diri sendiri kesusahan.

Semangat bersih-bersih kode! 🧹✨