Functional vs Class Component di ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Apa Itu Komponen di React?

Komponen adalah blok bangunan utama dalam React. Komponen memungkinkan kita untuk membuat bagian UI yang bisa digunakan kembali. Nah, ada dua jenis komponen utama dalam React:

• Functional Component (Komponen Fungsional)
• Class Component (Komponen Berbasis Kelas)

Mari kita bahas satu per satu!

2. Functional Component

Functional component adalah komponen yang ditulis sebagai fungsi JavaScript biasa. Sejak diperkenalkannya React Hooks di React 16.8, functional component menjadi pilihan utama karena lebih ringan dan mudah digunakan.

Contoh Functional Component

function Halo() {
  return <h1>Halo, Dunia!</h1>;
}

Atau dengan Arrow Function:

const Halo = () => <h1>Halo, Dunia!</h1>;

Kelebihan Functional Component

 Lebih sederhana dan mudah dibaca.  Performa lebih baik karena tidak memiliki overhead dari class.  Bisa menggunakan Hooks seperti useState dan useEffect.

Kekurangan Functional Component

 Sebelum Hooks, tidak bisa menggunakan state dan lifecycle (tapi sekarang sudah bisa!).

3. Class Component

Class component menggunakan sintaks berbasis kelas dan dulu sering digunakan sebelum adanya Hooks.

Contoh Class Component

class Halo extends React.Component {
  render() {
    return <h1>Halo, Dunia!</h1>;
  }
}

Kelebihan Class Component

Dulu satu-satunya cara untuk menggunakan state dan lifecycle di React.  Masih bisa digunakan dalam proyek lama.

Kekurangan Class Component

 Lebih kompleks dibanding functional component.  Kode lebih panjang dan sulit dibaca.  Kurang efisien dibanding functional component dengan Hooks.

4. Perbedaan Functional vs Class Component

Perbedaan	Functional Component	Class Component
Sintaks	Menggunakan fungsi	Menggunakan kelas
State	Menggunakan Hooks (useState)	Menggunakan this.state
Lifecycle	useEffect untuk efek samping	componentDidMount, componentDidUpdate, dll.
Kode	Lebih ringkas	Lebih panjang dan kompleks
Performa	Lebih cepat	Lebih lambat karena ada overhead class

5. Mana yang Harus Digunakan?

Gunakan Functional Component!

• Jika proyek baru → Gunakan functional component dengan Hooks.
• Jika proyek lama masih pakai class component → Bisa tetap digunakan, tapi mulai migrasi ke functional component.

Dengan Hooks, functional component sekarang bisa melakukan semua yang bisa dilakukan class component, tapi dengan cara yang lebih sederhana dan efisien!

Jadi, tim Functional Component atau masih setia dengan Class Component?