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:

copy
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:

copy
// 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 adalah undefined, 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

copy
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 🧙‍♂️

copy
// 🔴 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