Class Component React: State, Lifecycle, dan Konversi

Class component adalah class JavaScript yang mewarisi React.Component dan mengembalikan JSX dari method render(). Class component membaca props dari this.props, menyimpan state di this.state, dan memperbaruinya dengan this.setState(). Function component dengan hook sudah menggantikannya untuk kode baru, tetapi class masih didukung penuh, muncul di banyak codebase lama, dan menjadi satu-satunya cara menulis error boundary.

import { Component } from 'react';

class Counter extends Component {
    state = { count: 0 };

    render() {
        return (
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                {this.props.label}: {this.state.count}
            </button>
        );
    }
}

export default function App() {
    return (
        <div style={{ display: 'flex', gap: 8 }}>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Setiap counter menyimpan state-nya sendiri. Tambahkan <Counter label="Plums" /> ketiga, dan counter itu juga mulai dari 0.

Anatomi class component

import { Component } from 'react';

class Welcome extends Component {
    static defaultProps = { name: 'stranger' };

    constructor(props) {
        super(props); // required before using this
        this.state = { visits: 1 };
    }

    render() {
        return <h1>Hello, {this.props.name}. Visit #{this.state.visits}</h1>;
    }
}

• Class ini mewarisi Component (atau React.Component dengan import React from 'react').
• render() wajib ada. Method ini harus murni, seperti isi function component: baca this.props dan this.state, lalu kembalikan JSX.
• this.props menampung props. Props bersifat read only.
• State bisa diatur di constructor (panggil super(props) dulu) atau, yang lebih umum sekarang, sebagai class field: state = { visits: 1 };.
• static defaultProps masih berjalan untuk class di React 19 (fitur ini hanya dihapus untuk function component).

this.setState menggabungkan, dan bisa menerima updater

setState melakukan dua hal yang berbeda dari setter useState. Pertama, ia menggabungkan objek yang kamu kirim ke state saat ini, jadi kamu hanya memperbarui key yang kamu sebutkan. Kedua, seperti setiap pembaruan state di React, perubahannya tidak langsung diterapkan, jadi pakai bentuk updater saat nilai berikutnya bergantung pada nilai sebelumnya.

import { Component } from 'react';

class Profile extends Component {
    state = { name: 'Ada', likes: 0, address: { city: 'London', zip: 'NW1' } };

    addThreeWrong = () => {
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
    };

    addThreeRight = () => {
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
    };

    moveCity = () => {
        // The merge is shallow: this replaces the whole address object
        this.setState({ address: { city: 'Paris' } }, () => console.log('after update:', this.state.address));
    };

    render() {
        const { name, likes, address } = this.state;
        return (
            <div>
                <p>{name} has {likes} likes and lives in {address.city} ({address.zip || 'no zip'}).</p>
                <button onClick={this.addThreeWrong}>+3 with objects</button>
                <button onClick={this.addThreeRight}>+3 with updaters</button>
                <button onClick={this.moveCity}>Move to Paris</button>
            </div>
        );
    }
}

export default function App() {
    return <Profile />;
}

"+3 with objects" hanya menambah satu, karena ketiga pemanggilan membaca this.state.likes yang sama. "+3 with updaters" menambah tiga. "Move to Paris" mempertahankan name dan likes (berkat penggabungan) tetapi kehilangan zip, karena penggabungan hanya sedalam satu level. Tulis address: { ...this.state.address, city: 'Paris' } untuk mempertahankannya. Argumen kedua setState yang opsional berjalan setelah pembaruan, dan konsol menampilkan alamat baru di sana.

Binding event handler

Method yang dikirim sebagai onClick={this.handleClick} nantinya dipanggil sebagai fungsi biasa, tanpa objeknya, jadi this di dalamnya bernilai undefined.

// This throws when you press the first button: this is undefined in an unbound method.
import { Component } from 'react';

class Toggle extends Component {
    state = { on: false };

    handleClickBroken() {
        this.setState({ on: !this.state.on });
    }

    handleClickArrow = () => {
        this.setState({ on: !this.state.on });
    };

    render() {
        return (
            <div>
                <button onClick={this.handleClickBroken}>Broken method</button>
                <button onClick={this.handleClickArrow}>Class field arrow</button>
                <p>The switch is {this.state.on ? 'on' : 'off'}.</p>
            </div>
        );
    }
}

export default function App() {
    return <Toggle />;
}

Tombol pertama mencatat TypeError tentang membaca setState dari undefined. Tombol kedua berjalan, karena arrow function di class field menangkap this saat instance dibuat. Cara perbaikan yang lebih lama, yang masih umum di kode lawas, melakukan bind di constructor:

constructor(props) {
    super(props);
    this.state = { on: false };
    this.handleClick = this.handleClick.bind(this);
}

Arrow function inline, onClick={() => this.handleClick()}, juga berjalan.

Lifecycle method

Class merespons mount, update, dan unmount lewat method dengan nama yang sudah ditentukan. Yang paling sering kamu temui:

• componentDidMount(): setelah render pertama masuk ke DOM. Mulai timer, subscription, dan request di sini.
• componentDidUpdate(prevProps, prevState): setelah setiap update. Bandingkan dengan nilai sebelumnya sebelum melakukan sesuatu, atau kamu akan terjebak dalam loop.
• componentWillUnmount(): sebelum komponen dihapus. Batalkan apa yang dimulai componentDidMount.
• shouldComponentUpdate(nextProps, nextState): kembalikan false untuk melewatkan render.

Halaman component lifecycle berisi daftar lengkapnya, urutan jalannya, dan komponen yang mencatat setiap method.

Mengubah class menjadi function component

Berikut class yang memakai ketiga lifecycle method yang umum. Class ini berdetak setiap detik, mencatat saat prop label-nya berubah, dan menghentikan timer-nya saat dihapus.

import { Component, useState } from 'react';

class Timer extends Component {
    state = { seconds: 0 };

    componentDidMount() {
        this.intervalId = setInterval(this.tick, 1000);
    }

    componentDidUpdate(prevProps) {
        if (prevProps.label !== this.props.label) {
            console.log('label changed to', this.props.label);
        }
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    tick = () => {
        this.setState((state) => ({ seconds: state.seconds + 1 }));
    };

    render() {
        return <p>{this.props.label}: {this.state.seconds}s</p>;
    }
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

Dan berikut komponen yang sama sebagai fungsi. Setiap lifecycle method menjadi bagian dari sebuah effect, dan setup serta cleanup yang berkaitan berdampingan, bukan terpisah di dua method.

import { useEffect, useState } from 'react';

function Timer({ label }) {
    const [seconds, setSeconds] = useState(0);

    // componentDidMount + componentWillUnmount
    useEffect(() => {
        const intervalId = setInterval(() => setSeconds((s) => s + 1), 1000);
        return () => clearInterval(intervalId);
    }, []);

    // componentDidUpdate for label (this also runs once after mount)
    useEffect(() => {
        console.log('label is', label);
    }, [label]);

    return <p>{label}: {seconds}s</p>;
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

Kedua timer menghitung dengan cara yang sama dan mencatat setiap kali label berubah. Versi fungsi juga mencatat sekali saat mount, karena effect juga berjalan setelah render pertama. Langkah untuk setiap konversi:

1. this.props.x menjadi prop hasil destructuring, { x }.
2. Setiap key dari this.state menjadi useState tersendiri. Ingat, setter-nya mengganti, bukan menggabungkan.
3. Method menjadi fungsi biasa di dalam komponen. Tidak perlu binding.
4. componentDidMount, componentDidUpdate, dan componentWillUnmount menjadi pemanggilan useEffect, dikelompokkan berdasarkan apa yang dilakukannya, bukan kapan dijalankannya.
5. createRef menjadi useRef, dan static contextType dengan this.context menjadi useContext atau use.

Biarkan error boundary tetap berupa class; belum ada padanannya dalam bentuk fungsi.

PureComponent

Class component biasa merender setiap kali komponen induknya merender. PureComponent lebih dulu membandingkan props dan state baru dengan yang sebelumnya, sedalam satu level, dan melewatkan render jika tidak ada yang berubah. Ini pasangan versi class dari React.memo.

import { Component, PureComponent, useState } from 'react';

class PlainLabel extends Component {
    render() {
        console.log('PlainLabel rendered');
        return <p>Plain: {this.props.text}</p>;
    }
}

class PureLabel extends PureComponent {
    render() {
        console.log('PureLabel rendered');
        return <p>Pure: {this.props.text}</p>;
    }
}

export default function App() {
    const [clicks, setClicks] = useState(0);
    return (
        <div>
            <button onClick={() => setClicks(clicks + 1)}>Re-render the parent ({clicks})</button>
            <PlainLabel text="hello" />
            <PureLabel text="hello" />
        </div>
    );
}

Klik tombolnya: hanya PlainLabel rendered yang tercatat, karena PureLabel melihat text yang sama. Kirim text={'hello ' + clicks} ke keduanya, dan keduanya merender di setiap klik.

Perbandingannya dangkal, jadi prop berupa objek atau fungsi baru di setiap render induk (style={{ color: 'red' }}, onClick={() => ...}) membuatnya tidak berguna. Ini jebakan yang sama seperti pada React.memo.

Yang dihapus React 19 dari class

Jika kamu merawat kode class lama, beberapa pola tidak lagi berjalan di React 19:

• String ref (ref="input" dengan this.refs.input). Pakai createRef() atau ref callback.
• Context lawas (contextTypes, childContextTypes, getChildContext). Pakai createContext dengan static contextType.
• propTypes diabaikan. Pakai TypeScript atau pemeriksaanmu sendiri.
• findDOMNode sudah tidak ada. Pasang ref pada elemen DOM sebagai gantinya.

Method lama componentWillMount, componentWillReceiveProps, dan componentWillUpdate juga lawas. Method ini masih berjalan, baik dengan nama lama maupun nama UNSAFE_ (UNSAFE_componentWillMount dan seterusnya), tetapi sudah deprecated dan StrictMode memberi peringatan tentangnya; pindahkan kodenya ke componentDidMount, componentDidUpdate, atau getDerivedStateFromProps.