Ngoding React Nggak Harus Ribet: Ngobrolin Komponen yang Sering Disalahpahami
Waktu dapet kerjaan pertama sebagai front-end dev di dusdusaan.com (2019), aku dikasih project pake React, seingat gue aplikasinya tentang reseller dimana fitur yg saya kerjakan adalah tentang point dan event para reseller. Jujur aja, waktu itu aku belum ngerti-ngerti amat. React kayaknya keren, tapi juga kayak monster yang serem. Baru buka file App.jsx aja, langsung disambut sama function, props, dan hooks yang entah dari mana datangnya.
“Ini apaan sih? Komponen? Props? State? Gimana ini bisa jadi web beneran?”
Awalnya, aku mikir ngoding React itu harus serius banget, harus ngerti semuanya dulu baru bisa mulai. Tapi makin lama, makin sadar: banyak hal yang bikin React keliatan ribet tuh sebenernya cuma miskonsepsi aja—terutama soal komponen.
Di tulisan ini, aku pengen ngobrol santai tentang hal-hal yang sering bikin orang salah paham soal komponen di React. Biar yang baru mulai (dan yang udah lama juga) bisa ngeliat React itu nggak se-menakutkan itu. Yuk, kita lurusin bareng-bareng.
Apa Itu Komponen di React?
Kalau kamu baru kenalan sama React, kamu mungkin sering dengar kata “komponen.” Tapi sebenernya, komponen itu apa sih?
Singkatnya, komponen itu cuma function biasa di JavaScript, yang ngebalikin tampilan (UI). Serius, sesimpel itu.
Contoh:
function Halo() {
return <h1>Halo, Asrul 💘!</h1>;
}
Nah, function Halo di atas adalah Function Component di React. Bukan magic, bukan kelas berat, cuma function yang balikinnya tag HTML (yang sebenernya JSX).
Komponen vs Function Biasa
Bedanya sama function biasa? Function di JavaScript biasanya ngolah data atau ngelakuin sesuatu. Tapi di React, function-nya “ngelukis” tampilan berdasarkan data.
// Function biasa
function hitung(a, b) {
return a + b;
}
// Function di React
function TampilkanNama(props) {
return <p>Halo, {props.nama}!</p>;
}
Jadi, React ngajarin kita buat mikir: “Kalau satu bagian UI bisa direuse, bungkus aja jadi komponen.”
Kenapa Komponen Itu Penting Banget?
Komponen itu fondasi utama React karena bikin kita bisa:
Bagi-bagi tampilan jadi bagian kecil yang gampang diatur.
Gunakan ulang kode tanpa harus copas berkali-kali.
Pisahin logika & tampilan, biar aplikasimu tetap rapi meskipun makin kompleks.
Bayangin kamu bikin website e-commerce. Ada kartu produk, ada tombol beli, ada header. Semua itu bisa dibikin komponen, terus disusun kayak lego. Fleksibel dan terstruktur.
Apa saja Miskonsepsi yang Sering Terjadi (ini pada saya)
Waktu pertama kali ngulik React, banyak banget mitos yang bikin kita mikir "wah, ribet amat sih?". Padahal, banyak dari itu cuma miskonsepsi aja. Yuk kita lurusin bareng-bareng.
Komponen Harus Selalu Dipecah Kecil
Banyak tutorial bilang: “pecah komponen sekecil mungkin.” Tapi kenyataannya... nggak selalu harus gitu.
Kapan perlu dipecah?
✅ Kalau bagian itu dipakai di banyak tempat.
✅ Kalau bagian itu udah mulai panjang dan susah dibaca.
Kapan nggak perlu?
❌ Kalau komponen itu cuma dipakai sekali dan masih simpel.
❌ Kalau dipecah malah bikin susah ngikutin alurnya.
Ingat prinsip ini:
Reusability penting, tapi jangan sampai ngorbanin readability.
Semua Harus Jadi Reusable Component
Ini jebakan yang sering bikin code kita overengineered (rekayasa bangeeet).
Kadang kita terlalu semangat bikin komponen jadi “bisa dipakai di mana aja.” Tapi kenyataannya, belum tentu bakal dipakai ulang.
Bikin reusable kalau:
📌 Emang ada rencana bakal dipakai di beberapa tempat.
📌 Strukturnya cukup generik dan bisa dikustom lewat props.
Premature abstraction itu bahaya. Jangan buru-buru bikin FancyButtonWithEverything.js padahal cuma dipakai di satu tempat.
⚠️ Kapan sebaiknya dipecah, kapan nggak perlu.
⚠️ Prinsip reusability vs readability.
Komponen Harus Statefull Supaya Powerful
Ada yang mikir, makin banyak useState, makin keren komponennya. Padahal nggak juga.
🧠 Stateless component itu bagus banget buat jaga logika tetap bersih.
📦 Stateful component penting kalau kamu perlu:
Nge-handle input/form.
Tanggapi action user (klik, hover, dll).
Simpan data sementara kayak modal terbuka/tutup.
Tipsnya:
Simpan state sedekat mungkin ke tempat yang butuh. Jangan semuanya disentralisasi di satu tempat.
Props Itu Ribet dan Susah Dipahami
Salah satu ketakutan paling umum: props. Padahal props itu... ya cuma parameter yang dikirim ke function.
function Teks(props) {
return <p>{props.judul}</p>;
}
Props sering dipakai untuk:
Mengoper data (
title,user,color)Mengoper fungsi (
onClick,onSubmit)Children!
<Card>
<p>Ini isi Card-nya</p>
</Card>
Kalau kamu paham props itu kayak argumen ke function, semuanya jadi masuk akal.
Tips Biar Ngoding Komponen Lebih Santai
Kadang kita terlalu “serius” pas ngoding, padahal bisa dibawa santai tapi tetap rapi dan maintainable. Nih beberapa tips biar ngoding komponen nggak bikin stres ☕:
Mulai Dari Function Biasa Dulu
Jangan langsung mikir “ini harus jadi komponen gede yang reusable dan lengkap.”
Coba bayangin dulu:
“Kalau ini function biasa di JavaScript, input-nya apa dan output-nya apa?”
Kalau udah kebayang, baru tinggal bungkus pakai function Component() dan return JSX. Simple.
Tulis UI Secara Deklaratif
React itu enaknya karena deklaratif. Artinya kamu tinggal bilang:
“Saya mau tampilkan ini kalau datanya ada.”
Daripada ngatur-ngatur DOM kayak jQuery zaman dulu, lebih baik:
{isLoggedIn ? <Dashboard /> : <Login />}
Dibanding:
if (isLoggedIn) {
renderDashboard();
} else {
renderLogin();
}
Deklaratif = lebih gampang dibaca dan maintenance (dirawat).
Jangan Takut Sedikit Duplicate
Sering banget kita terlalu cepat mikir:
“Wah ini duplikat nih, harus dibikin reusable!”
Padahal kadang duplikat 2-3 baris lebih gampang dibaca ketimbang maksa abstraksi yang ribet.
Kalau nanti memang udah kebukti dipakai di banyak tempat, baru dipecah.
Pakai Hooks Dengan Bijak
Hooks itu keren — useState, useEffect, useMemo, useCallback, dan teman-temannya. Tapi jangan ngerasa harus pakai semuanya sekaligus.
Tips:
Pakai
useStatedulu, baru kalau mulai kompleks, tambahuseEffect.Gunakan
useMemo/useCallbackkalau udah kelihatan ada performa issue.Kadang cukup 1-2 hook aja buat komponen yang ringan.
Kuncinya: mulai simpel, naik bertahap. Nggak usah langsung mikir bikin komponen super-canggih.
Studi Kasus Mini: Satu Komponen, Banyak Salah Paham
Biar nggak cuma teori, yuk kita lihat satu contoh kecil komponen yang sering disalahpahami — biasanya karena overthinking atau terlalu ngejar "best practice" yang belum perlu.
Versi Awal: Terlalu Ambisius 🔥🔥
// Button.tsx
import React from "react";
interface ButtonProps {
label: string;
onClick: () => void;
variant?: "primary" | "secondary";
size?: "small" | "large";
}
export const Button: React.FC<ButtonProps> = ({
label,
onClick,
variant = "primary",
size = "small",
}) => {
const className = `btn ${variant} ${size}`;
return <button className={className} onClick={onClick}>{label}</button>;
};
Kelihatannya keren, ya? Tapi masalahnya:
Dipakai cuma sekali, padahal udah dibuat "reusable."
Banyak prop yang belum dibutuhkan.
Abstraksi terlalu cepat, padahal kasus penggunaan belum banyak.
Step 1: Sederhanakan Dulu
// Home.tsx
<button onClick={handleClick}>Simpan</button>
Simple, langsung to the point. Nggak usah mikir "component" dulu kalau belum perlu.
Step 2: Abstraksi Ketika Udah Ada Pola
Setelah muncul banyak tombol yang mirip dan pengen dirapikan:
// components/MyButton.tsx
export function MyButton({ children, onClick }: {
children: React.ReactNode;
onClick: () => void;
}) {
return (
<button
className="rounded px-4 py-2 bg-blue-500 text-white"
onClick={onClick}
>
{children}
</button>
);
}
Lebih ringan dari contoh awal.
Fokus pada kebutuhan nyata.
Nggak terlalu banyak opsi yang belum perlu.
Step 3: Tambah Fitur Saat Diperlukan
Kalau nanti udah mulai muncul variasi (disabled, variant, dll), baru tambahkan pelan-pelan. Jangan langsung dari awal.
Pelajaran dari studi kasus ini:
React itu fleksibel. Tapi fleksibel bukan berarti harus kompleks dari awal.
Mulailah dari kebutuhan nyata, bukan dari bayangan “nanti kayaknya bakal dibutuhin”.
Studi Kasus Mini: Satu Komponen, Banyak Salah Paham
Contoh sederhana komponen yang sering disalahgunakan.
Rewrite step-by-step yang lebih clean dan readable.
Berdamai Sama React
Di balik semua kebingungan tentang komponen, props, dan state, sebenarnya React itu nggak ribet-ribet amat. Justru, kekuatannya ada di kesederhanaan:
Komponen = function yang balikin UI. Sesimpel itu.
Masalahnya sering bukan di React-nya, tapi di mindset kita yang terlalu perfeksionis dari awal.
Pingin semuanya reusable. Pingin langsung best practice. Pingin kelihatan keren.
Padahal, belajar React itu perjalanan — bukan sprint.
React bukan soal ngapalin hook atau bikin komponen kompleks. Tapi soal mikir secara deklaratif: “Kalau datanya begini, UI-nya harus kelihatan gimana?”
Kalau kamu masih suka mikir,
"Kenapa ya kok React kayaknya ribet banget?"
...mungkin kamu cuma butuh waktu buat berdamai. Nggak usah buru-buru jadi senior. Nikmatin aja prosesnya. ✌️
Yuk, mulai pelan-pelan. Mulai dari function.
Lama-lama juga kamu bakal ngomong sendiri:
"Ohh, ternyata React segini doang."
Semangat ya!
Kalau ada bagian dari React yang masih bikin kening berkerut, komen atau DM aja — kita bahas bareng. 😉
