React.Component — komponen kelas dan cara kerjanya

Apa itu React.Component?

React.Component — kelas abstrak yang menyediakan metode bawaan untuk bekerja dengan state, props, dan siklus hidup komponen. Untuk membuat komponen kelas, Anda perlu mendefinisikan kelas yang mewarisi React.Component dan mengimplementasikan metode render.

React.Component muncul di versi pertama React (2013) dan tetap menjadi cara utama membuat komponen selama lima tahun. Ekosistem React dibangun di sekitar kelas: komponen tingkat tinggi (HOC), render props, konteks — semua pola ini diimplementasikan melalui sintaks kelas.

Dengan dirilisnya React 16.8 pada tahun 2019, tim React memperkenalkan hooks sebagai alternatif untuk kelas. Hooks menyelesaikan tugas yang sama — state, efek, konteks — tetapi tanpa pewarisan dan pengikatan konteks yang rumit. React.Component tetap didukung sepenuhnya, tetapi untuk proyek baru pendekatan fungsional direkomendasikan.

Membuat komponen kelas

Komponen kelas minimal — kelas dengan satu metode render yang mengembalikan elemen React. render — satu-satunya metode wajib. Ini harus menjadi fungsi murni dari this.props dan this.state: kumpulan props dan state yang sama memberikan hasil yang sama.

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Konstruktor dan inisialisasi state

Konstruktor dijalankan sebelum mounting. Di dalamnya, super(props) dipanggil untuk meneruskan props ke kelas induk dan this.state diinisialisasi. Menggunakan konstruktor untuk tujuan lain — langganan, panggilan API — tidak disarankan: untuk itu ada componentDidMount.

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

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

Manajemen state melalui this.state dan this.setState

this.state — objek yang berisi data komponen. Mengubahnya secara langsung (this.state.count = 1) dilarang — tidak menyebabkan render ulang dan merusak prediktabilitas. State harus diperbarui melalui this.setState, yang membuat objek state baru dan memicu render ulang.

setState dapat menerima objek atau fungsi. Bentuk fungsional lebih disukai ketika state baru bergantung pada state sebelumnya: this.setState(prev => ({ count: prev.count + 1 })). React dapat mengelompokkan beberapa setState dalam satu batch untuk optimalisasi kinerja.

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
  }

  handleClick() {
    this.setState(prev => ({ isOn: !prev.isOn }));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

Properti penting setState — ia asinkron. Setelah memanggil setState, state tidak langsung diperbarui. Jika perlu melakukan tindakan setelah pembaruan, berikan callback sebagai argumen kedua: this.setState(newState, () => console.log(this.state)).

Metode siklus hidup

Komponen kelas memiliki metode yang telah ditentukan yang dipanggil React pada saat-saat tertentu. Mounting — constructor → render → componentDidMount. Pembaruan — render → componentDidUpdate. Unmounting — componentWillUnmount.

ComponentDidMount — permintaan data

componentDidMount — tempat utama untuk efek samping setelah render pertama. Di sini permintaan HTTP dilakukan, koneksi WebSocket dibuat, dan timer dimulai. Jika Anda tidak membersihkan langganan di componentWillUnmount, akan terjadi kebocoran memori.

class UserProfile extends Component {
  componentDidMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ user: data }));
  }

  componentWillUnmount() {
    // Batalkan permintaan saat unmount
  }

  render() {
    return <div>{this.state.user?.name}</div>;
  }
}

Pengikatan konteks this dalam metode

Di JavaScript, metode kelas secara default tidak terikat ke instance. Jika Anda meneruskan metode sebagai callback — ke penangan event, timer — this akan menjadi undefined (dalam mode ketat) atau window (tanpa mode ketat). Tanpa pengikatan, this.setState akan melempar kesalahan.

Ada tiga cara pengikatan: bind di konstruktor, fungsi panah di callback, dan class field dengan fungsi panah. Cara pertama — rekomendasi resmi React: bind sekali di konstruktor, tanpa membuat ulang fungsi setiap render.

// Metode 1: bind di konstruktor (direkomendasikan)
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Class field — sintaks modern dengan pengikatan otomatis. Fungsi panah di properti kelas menangkap this dari ruang lingkup konstruktor. Kekurangannya — metode dibuat pada setiap instance, bukan pada prototipe, yang meningkatkan memori untuk ratusan komponen dari jenis yang sama.

Perbandingan komponen kelas dan fungsional

Pilihan antara kelas dan fungsi — bukan hanya masalah sintaks. Komponen fungsional dengan hooks memecahkan masalah yang melekat pada kelas: duplikasi logika di berbagai metode siklus hidup (componentDidMount + componentDidUpdate), kompleksitas dengan this, dan ketidakmampuan mengekstrak logika terkait ke blok yang dapat digunakan kembali.

Komponen fungsional lebih mudah diuji — mereka tidak memiliki state internal (yang sebelum hooks hanya ada di kelas) dan tidak memerlukan pemasangan di DOM untuk memeriksa callback. React merekomendasikan komponen fungsional untuk semua proyek baru, dokumentasi dan contoh ditulis dengan mereka.

Komponen kelas tetap menjadi pilihan terbaik saat bekerja dengan kode lama. Jika proyek dimulai sebelum 2019, kemungkinan berisi ribuan komponen kelas. Menulis ulang semuanya ke hooks dalam satu sprint berisiko. React menjamin kompatibilitas mundur: komponen kelas tidak akan dihapus.

Strategi migrasi dari kelas ke hooks

Migrasi bertahap dimulai dengan analisis komponen. Komponen sederhana tanpa state (stateless) diterjemahkan pertama — mereka dengan mudah diganti dengan fungsi. Kemudian — komponen dengan satu-dua bidang state, di mana useState langsung menggantikan this.state dan this.setState.

Komponen kompleks dengan banyak metode siklus hidup diterjemahkan melalui useEffect. Logika dari componentDidMount + componentDidUpdate dibagi menjadi beberapa useEffect terpisah dengan dependensi berbeda. componentWillUnmount diganti dengan fungsi kembali di dalam useEffect. Untuk logika state yang kompleks, gunakan useReducer.

Alat migrasi otomatis — @phenomnomnominal/ts-react-class-to-hook atau skrip codemod — dapat secara otomatis mengonversi kelas sederhana. Untuk kasus kompleks, migrasi tetap menjadi pekerjaan manual yang membutuhkan pemahaman logika komponen asli.