Cara Membuat Komponen yang Lebih Bersih (Versi Santai)
Halo, Sobat Koder! Siapa sih yang nggak mau punya komponen yang rapi, mudah dibaca, dan gampang di-maintain? Apalagi kalau lagi ngoding React atau Vue, komponen yang berantakan bisa bikin kepala pusing tujuh keliling. Nah, kali ini kita bahas tips-tips simpel biar komponen kamu jadi lebih bersih dan elegan. Yuk, simak!
1. Satu Komponen, Satu Tanggung Jawab
Prinsip paling dasar: jangan serakah. Satu komponen cukup untuk satu fungsi aja. Misalnya, komponen `UserCard` ya tugasnya cuma nampilin data user, bukan ngurusin login atau fetching data seabrek.
Contoh buruk:
“`jsx
function UserCard({ user }) {
const [isAdmin, setIsAdmin] = useState(false);
useEffect(() => {
fetch(‘/api/check-admin?userId=’ + user.id)
.then(res => res.json())
.then(data => setIsAdmin(data.isAdmin));
}, [user.id]);
return (
{user.name}
{isAdmin ? ‘Admin’ : ‘User’}
);
}
“`
Komponen ini terlalu banyak urusan: fetching, state, dan tampilan. Lebih baik pisahkan logika fetching-nya ke custom hook atau komponen terpisah.
2. Hindari Props Drilling yang Berlebihan
Props drilling itu kayak oper api dari kakek ke cucu lewat bapak – melelahkan. Kalau ada data yang dipakai di banyak level, gunakan context atau state management (Redux, Zustand, dll). Tapi jangan overkill juga ya, cukup untuk data yang benar-benar global.
Alternatif lain: composition. Alih-alih ngelempar props bertubi-tubi, bungkus anak komponen dengan parent yang langsung nyediain data yang dibutuhkan.
3. Gunakan Custom Hooks (atau Composition Functions)
Biar komponen tetap ramping, pindahkan logika kompleks ke custom hooks. Misalnya, hook `useUser` yang handle fetching, loading, dan error. Komponen tinggal panggil hook itu dan render hasilnya.
“`jsx
function useUser(userId) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchUser(userId).then(data => {
setUser(data);
setLoading(false);
});
}, [userId]);
return { user, loading };
}
“`
Dengan begitu, komponen tampilan jadi fokus ke UI doang.
4. Pisahkan Logika Bisnis dari Tampilan
Ini masih nyambung sama poin sebelumnya. Presentational component cuma terima props dan render. Container component yang ngurus state dan logic. Pola ini bikin komponen lebih bersih dan gampang dites.
Contoh:
– `UserList` (container) – fetching data, state, event handler
– `UserRow` (presentational) – cuma render satu baris user
Gampang kan?
5. Manfaatin Fragment Biar Nggak Ada `
` Ghoib
Kadang kita butuh beberapa elemen tanpa parent element. Daripada bungkus dengan `
` yang nggak perlu, pakai Fragment: `…`.
“`jsx
function UserInfo({ name, email }) {
return (
{name}
{email}
);
}
“`
Lebih bersih, nggak ada DOM berlebih.
6. Kelola State dengan Bijak
Jangan asal bikin state baru. Mungkin data itu bisa dihitung dari props atau state lain. Contoh: jangan simpan `fullName` jika sudah ada `firstName` dan `lastName`. Cukup hitung di render.
“`jsx
const fullName = `${firstName} ${lastName}`;
“`
Ini mengurangi redundancy dan potensi bug.
7. Gunakan PropTypes atau TypeScript
Nggak cuma buat jaga-jaga, tapi juga bikin komponen lebih bersih secara dokumentasi. Dengan TypeScript, kamu langsung tahu props apa aja yang dibutuhkan dan tipe datanya. Nggak perlu tebak-tebakan.
8. Rapikan Struktur File
Biar komponen makin mantap, atur file dengan rapi. Misalnya:
“`
components/
User/
UserCard.jsx
UserCard.module.css
UserList.jsx
index.js
“`
Dengan index, impor jadi lebih pendek.
9. Jangan Lupa Kejelasan Nama
Nama komponen, fungsi, dan variabel harus deskriptif. `UserAvatar` lebih baik daripada `Avatar` (karena bisa ambigu). Props juga: `onClick` jelas, tapi `handleClick` juga oke asal konsisten.
10. Review dan Refactor Rutin
Bersihin komponen itu proses berkelanjutan. Setelah nambah fitur baru, sempatkan lihat lagi apakah ada kode yang bisa dipersingkat atau dipisah. Jangan takut refactor, asal punya testing dulu.
—
Kesimpulannya, komponen yang bersih bukan cuma soal tampilan kode, tapi juga soal struktur dan tanggung jawab. Dengan menerapkan prinsip single responsibility, pake custom hooks, pisahin logic dan view, serta rapiin state, kamu bakal punya komponen yang enak dibaca dan gampang dikembangkan. Yuk, mulai praktik dari komponen kecil dulu, lama-lama jadi kebiasaan!
Selamat ngoding, semoga komponenmu makin kinclong! 😄
Kadang kita butuh beberapa elemen tanpa parent element. Daripada bungkus dengan `
“`jsx
function UserInfo({ name, email }) {
return (
{name}
{email}
);
}
“`
Lebih bersih, nggak ada DOM berlebih.
6. Kelola State dengan Bijak
Jangan asal bikin state baru. Mungkin data itu bisa dihitung dari props atau state lain. Contoh: jangan simpan `fullName` jika sudah ada `firstName` dan `lastName`. Cukup hitung di render.
“`jsx
const fullName = `${firstName} ${lastName}`;
“`
Ini mengurangi redundancy dan potensi bug.
7. Gunakan PropTypes atau TypeScript
Nggak cuma buat jaga-jaga, tapi juga bikin komponen lebih bersih secara dokumentasi. Dengan TypeScript, kamu langsung tahu props apa aja yang dibutuhkan dan tipe datanya. Nggak perlu tebak-tebakan.
8. Rapikan Struktur File
Biar komponen makin mantap, atur file dengan rapi. Misalnya:
“`
components/
User/
UserCard.jsx
UserCard.module.css
UserList.jsx
index.js
“`
Dengan index, impor jadi lebih pendek.
9. Jangan Lupa Kejelasan Nama
Nama komponen, fungsi, dan variabel harus deskriptif. `UserAvatar` lebih baik daripada `Avatar` (karena bisa ambigu). Props juga: `onClick` jelas, tapi `handleClick` juga oke asal konsisten.
10. Review dan Refactor Rutin
Bersihin komponen itu proses berkelanjutan. Setelah nambah fitur baru, sempatkan lihat lagi apakah ada kode yang bisa dipersingkat atau dipisah. Jangan takut refactor, asal punya testing dulu.
—
Kesimpulannya, komponen yang bersih bukan cuma soal tampilan kode, tapi juga soal struktur dan tanggung jawab. Dengan menerapkan prinsip single responsibility, pake custom hooks, pisahin logic dan view, serta rapiin state, kamu bakal punya komponen yang enak dibaca dan gampang dikembangkan. Yuk, mulai praktik dari komponen kecil dulu, lama-lama jadi kebiasaan!
Selamat ngoding, semoga komponenmu makin kinclong! 😄