React: Penggunaan Constructor dan Super pada Component.

Sebagian developer masih bingung ( termasuk saya, waktu itu : ) dengan penggunaan constructor dan super di React, dan saya mencoba memahaminya dengan membaca literatur dari MDN Web Doc.

The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name “constructor” in a class. A SyntaxError will be thrown if the class contains more than one occurrence of a constructor method.

Terjemahannya kira-kira begini:

Constructor adalah spesial method untuk membuat dan meng-inisialisasi sebuah objek dibuat dengan kelas. Dimana hanya ada satu spesial method constructor di dalam sebuah kelas. Akan muncul eror bila sebuah kelas terdapat lebih dari satu constructor method.

Kemudian:

A constructor can use the super keyword to call the constructor of a parent class.

Sebuah constructor dapat menggunakan kata kunci ‘super’ untuk memanggil constructor dari parent.

Kemudain pertanyaan yang muncul adalah :

  • Apakah kita perlu membuat constructor dalam setiap component?
  • Apakah kita perlu memanggil super() didalam constructor kita?
  • Apa bedanya antara super() dan super(props)?
Apakah kita perlu membuat constructor dalam setiap component?

Jawabannya adalah TIDAK. Jika component anda tidak terlalu kompleks anda tidak perlu menambahkan constructor sama sekali.

Apakah kita perlu memanggil super() didalam constructor kita?

Jawabannya adalah YA, jika anda ingin men-set property dan bisa akses kedalam constructor anda perlu memanggilnya dengan super().

Kode diatas akan muncul error karena tidak memanggil super().
Apabedanya antara super() dan super(props)?

Jika anda ingin bisa akses props kedalam constructor class anda perlu memanggil super(props).

Props ini akan error undefined

Sangat umum pada React untuk menggunakan props dari parent component dan men-set nya kedalam local state component. Dalam hal ini selalu panggil super() dengan props, contoh super(props).

Jika anda tidak memiliki constructor pada component class anda, React akan set this dan props otomatis, sehingga anda dapat mengakses props didalam render method, seperti contoh dibawah ini:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.