Menulis kode yang bersih (clean code) bukan hanya soal membuat kode berfungsi, tetapi juga soal membuatnya mudah dibaca, dimaintain, dan dikembangkan di masa depan. Dengan kode yang rapi, tim development atau bahkan diri sendiri di masa depan tidak akan kesulitan memahami logika di balik setiap baris kode. Berikut adalah beberapa tips yang bisa membantu kamu menulis kode yang lebih bersih dan efektif:
Daftar Isi
- 1. Hindari Penggunaan Kurung Kurawal yang Tidak Diperlukan pada String
- 2. Props Boolean? Hilangkan Nilai Ketika True
- 3. Hindari Penggunaan <div> yang Tidak Perlu
- 4. Gunakan Default Props daripada Conditional Rendering
- 5. Evaluasi Short-Circuit untuk Kondisional
- 6. Hindari Handler Event Inline yang Panjang
1. Hindari Penggunaan Kurung Kurawal yang Tidak Diperlukan pada String
Saat bekerja dengan string, terutama di dalam komponen, menambahkan kurung kurawal yang tidak perlu hanya akan membuat kode terlihat berantakan. Kode yang sederhana dan langsung seringkali lebih mudah dibaca.
//Clean Example
<Button label='Click me' />
//Less Clean Example
<Button label={'Click me'} />
Pada contoh di atas, tidak ada kurung kurawal tambahan yang membuat kode lebih simpel dan mudah dipahami.
2. Props Boolean? Hilangkan Nilai Ketika True
Ketika menggunakan boolean pada props, cukup menyebutkan nama props-nya saja ketika nilainya true
. Ini lebih ringkas dan lebih mudah dimengerti.
//Clean Example
<Checkbox checked />
//Less Clean Example
<Checkbox checked={true} />
Dengan menghilangkan nilai true
, kode menjadi lebih pendek dan tetap jelas maksudnya.
3. Hindari Penggunaan <div>
yang Tidak Perlu
Memasukkan elemen <div>
yang tidak diperlukan hanya akan menambah kompleksitas DOM dan membuat struktur kode menjadi lebih berantakan. Jika elemen tersebut tidak memiliki fungsi khusus, sebaiknya dihilangkan.
//Clean Example
export function UserProfile() {
return (
<>
<h2>Safar Septyadi</h2>
<p>Software Engineer</p>
</>
)
}
//Less Clean Example
export function UserProfile() {
return (
<div>
<h2>Safar Septyadi</h2>
<p>Software Engineer</p>
</div>
)
}
Menghilangkan <div>
yang tidak perlu membantu DOM menjadi lebih ringan dan kode lebih rapi.
4. Gunakan Default Props daripada Conditional Rendering
Daripada menambahkan logika if-else
untuk props yang mungkin kosong, lebih baik gunakan default props. Hal ini membuat kode lebih ringkas dan tetap fungsional.
//Clean Example
export function UserProfile({name = 'Guest'}) {
return <h2>{name}</h2>
}
//Less Clean Example
export function UserProfile({name}) {
return <h2>{name ? name : 'Guest'}</h2>
}
Dengan default props, kamu bisa menghindari pengecekan kondisi yang tidak perlu.
5. Evaluasi Short-Circuit untuk Kondisional
Short-circuit evaluation memungkinkan kamu untuk menulis logika yang lebih singkat dan mudah dipahami, terutama ketika bekerja dengan komponen atau kondisi boolean.
Contoh Bersih:
//Clean Example
{isLoggedIn && <UserProfile />}
//Less Clean Example
{isLoggedIn ? <UserProfile /> : null}
Dengan menggunakan short-circuit evaluation, kamu dapat menghindari penggunaan ternary operator yang berlebihan.
6. Hindari Handler Event Inline yang Panjang
Menggunakan inline event handler yang terlalu panjang dapat membuat kode sulit dibaca dan dikelola. Sebaiknya, pindahkan logic ke dalam fungsi terpisah atau buat blok kode yang lebih bersih.
Contoh Bersih:
//Clean Example
<button onClick={() => setOpen(!open)}>
Toggle
</button>
//Less Clean Example
const handleClick = () => setOpen(!open);
return (
<button onClick={handleClick}>
Toggle
</button>
)
Dengan memanfaatkan fungsi inline yang sederhana, kode menjadi lebih kompak dan mudah dimengerti.
Baca juga: Mengapa Nama Komponen React Harus Diawali Huruf Kapital?
Dengan mengikuti tips di atas, kamu bisa membuat kode yang lebih bersih, ringkas, dan mudah dimaintain. Selain membantu diri sendiri di masa depan, clean code juga memudahkan tim pengembang lain yang mungkin akan membaca atau memperbarui kode tersebut.
Happy coding! 💻✨