Perbedaan Functional Component dan Class yang Harus Kamu Tau

Perbedaan Functional Component dan Class yang Harus Kamu Tau
Photo by Catherine Breslin / Unsplash

Dalam pengembangan aplikasi React, kita mengenal dua jenis komponen utama: Functional Component dan Class Component. Memahami perbedaan keduanya penting agar kamu bisa memilih pendekatan yang tepat sesuai kebutuhan proyek.

Komponen Fungsional (Functional Components)

Komponen fungsional adalah fungsi JavaScript biasa yang menerima props sebagai argumen dan mengembalikan elemen React. Sebelumnya, komponen fungsional hanya digunakan untuk komponen presentasional yang tidak memiliki state atau metode siklus hidup. Namun, sejak diperkenalkannya React Hooks pada versi 16.8, komponen fungsional kini dapat memiliki state dan fitur lainnya.

Contoh Komponen Fungsional:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Hitungan: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default Counter;

Dalam contoh di atas, useState digunakan untuk menambahkan state pada komponen fungsional.

Komponen Kelas (Class Components)

Komponen kelas adalah kelas JavaScript yang mewarisi dari React.Component dan memiliki metode render() yang mengembalikan elemen React. Komponen ini dapat memiliki state dan metode siklus hidup.

Contoh Komponen Kelas:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Hitungan: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Tambah</button>
      </div>
    );
  }
}

export default Counter;

Dalam contoh di atas, state didefinisikan dalam konstruktor dan diperbarui menggunakan this.setState().

Perbedaan Utama

  1. Sintaksis:
    • Komponen Fungsional: Ditulis sebagai fungsi JavaScript biasa.
    • Komponen Kelas: Ditulis sebagai kelas yang mewarisi dari React.Component.
  2. State dan Metode Siklus Hidup:
    • Komponen Fungsional: Sebelum React Hooks, tidak memiliki state atau metode siklus hidup. Setelah React Hooks, dapat menggunakan useState, useEffect, dan lainnya.
    • Komponen Kelas: Memiliki state dan metode siklus hidup seperti componentDidMount, componentDidUpdate, dan componentWillUnmount.
  3. Kinerja:
    • Komponen Fungsional: Umumnya lebih ringan dan memiliki kinerja yang lebih baik karena tidak memiliki overhead dari kelas.
    • Komponen Kelas: Memiliki overhead tambahan karena merupakan kelas dan memiliki metode internal.
  4. Penggunaan:
    • Komponen Fungsional: Lebih disukai dalam pengembangan modern karena sintaksis yang lebih sederhana dan dukungan penuh untuk state dan efek samping melalui Hooks.
    • Komponen Kelas: Masih digunakan, terutama dalam kode lama atau ketika bekerja dengan pustaka yang belum mendukung Hooks.

Kapan Menggunakan Komponen Fungsional atau Kelas?

  • Komponen Fungsional: Disarankan untuk digunakan dalam pengembangan baru karena sintaksis yang lebih bersih dan dukungan penuh untuk fitur React melalui Hooks.
  • Komponen Kelas: Mungkin masih diperlukan dalam proyek yang sudah ada atau ketika bekerja dengan pustaka yang belum mendukung Hooks.

Kesimpulan

Memahami perbedaan antara komponen fungsional dan kelas di React sangat penting untuk menulis kode yang efisien dan mudah dipelihara. Dengan diperkenalkannya React Hooks, komponen fungsional kini dapat menangani state dan efek samping, menjadikannya pilihan utama dalam pengembangan aplikasi React modern.

Semoga penjelasan ini membantu kamu memahami perbedaan antara komponen fungsional dan kelas di React. Selamat coding!