Berhenti Pakai '&&' Untuk Conditional Rendering Di React
Kalau kamu lihat berbagai aplikasi React, kamu pasti tahu bagaimana caranya untuk merender bagian-bagian dari sebuah kompenen secara kondisional berdasarkan props dan state. Biarpun ada banyak cara untuk melakukan conditional rendering, artikel ini akan fokus membahas operator &&
pada Javascript saja. Alasan utama untuk penekanan ini adalah operator &&
sering kali memunculkan bug pada UI, yang mana sebenarnya bisa dihindari dengan mudah dan juga hal ini tidak banyak yang membahasnya.
Cara "&&" Bekerja
Sebuah cara klasik dari penggunaan operator &&
di React akan tampak seperti:
function MyComponent({ condition }) { return ( <div> <h1>Title</h1> {condition && <ConditionalComponent />} </div> ); }
Penjelasan:
- Jika
kondisi
adalah truthy value, maka<ConditionalComponent />
akan dirender - Jika
kondisi
adalah falsy value, maka<ConditionalComponent />
tidak akan dirender
Kenapa demikian? Hal ini bukan spesifik di React saja tapi merupakan sebuah perilaku dari Javascript dan bahasa-bahasa pemrograman lainnya yang disebut dengan short-circuit evaluation. Yaitu jika operan pertama (kondisi
) adalah falsy, operator AND (&&) akan berhenti dan tidak mengevaluasi operan kedua (<ConditionalComponent />
).
Kamu dapat mencobanya di browser dengan menjalankan potongan kode berikut di console:
// Ini akan menampilkan sebuah alert box. true && alert('Hello'); // Ini tidak akan terjadi apa-apa false && alert('Not hello');
Kenapa Tidak Boleh Memakai "&&"?
Sintaks pendek &&
sering lebih disukai dan memang juga berfungsi. Tapi hanya karena kamu bisa memakainya bukan berarti kamu harus memakainya juga.
Di kasus kita yang disebutkan diatas, jika kondisi
bernilai true
atau false
, kamu akan mendapatkan hasil yang kamu harapkan — <ConditionalComponent />
masing-masing akan dirender atau tidak. Semua berjalan baik sejauh ini. Namun, jika kondisi tidak mengevaluasi ke boolean, hal ini justru dapat menyebabkan masalah.
Contohnya:
- Jika
kondisi
adalah 0, 0 akan ditampilkan di UI - Jika
kondisi
adalahundefined
, kamu akan mendapatkan error: "Uncaught Error: Error(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."
Lalu Apa Yang Seharusnya Digunakan Selain "&&"?
Untuk menghindari sesuatu yang tidak kamu inginkan di UI, misalnya nilai 0 yang bisa merusak layout, kamu bisa menggunakan ternary operator sebagai gantinya
condition ? <ConditionalComponent /> : null
Kesimpulan
Untuk mencegah bug UI yang dapat dihindari, gunakanlah operator ternary Javascript untuk melakukan conditional rendering komponen React daripada menggunakan logic operator AND (&&). Ini adalah mantra yang sederhana tapi tidak bisa dihancurkan 🧙♂️
// 🔴 Jelek condition && <ConditionalComponent /> // 🟢 Bagus condition ? <ConditionalComponent /> : null
Jadi, apakah kamu masih sering menggunakan operator &&
daripada ternary operator? Coba kasih tahu di kolom komentar dibawah!
Terimakasih sudah membaca, jangan lupa share juga ke teman-teman kamu kalau kamu suka artikel ini.
Sumber: Medium
react tips javascript