Menulis State di React dengan Cara yang Efektif

Dalam React, state adalah salah satu konsep utama yang memungkinkan komponen menyimpan dan mengelola data yang bisa berubah seiring waktu. Berbeda dengan props yang dikirim dari parent component, state bersifat lokal dan hanya bisa diubah oleh komponen itu sendiri.

Memahami cara menulis state yang efektif sangat penting untuk membangun aplikasi yang responsif dan mudah dikelola. Artikel ini akan membahas cara kerja state, cara menggunakannya dalam Function Component dan Class Component, serta best practices dalam pengelolaannya.

1. Apa Itu State di React?

✅ State menyimpan data yang bisa berubah selama siklus hidup komponen.
✅ State bersifat lokal – Tidak bisa diakses oleh komponen lain secara langsung.
✅ Mengubah state menyebabkan komponen melakukan re-render.
✅ State biasanya digunakan untuk menyimpan input pengguna, status tombol, data API, dll.

React menyediakan dua cara utama untuk menggunakan state:

1. Menggunakan useState() dalam Function Component.
2. Menggunakan this.state dalam Class Component.

2. Menggunakan State dalam Function Component (useState)

Sejak diperkenalkannya React Hooks, penggunaan state dalam Function Component menjadi lebih mudah dengan useState().

📌 Contoh State di Function Component

import React, { useState } from 'react';

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

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

export default Counter;

📌 Penjelasan Kode:

• useState(0) → Mendeklarasikan state dengan nilai awal 0.
• count → Menyimpan nilai state.
• setCount() → Fungsi untuk mengubah nilai state.
• Setiap kali tombol ditekan, setCount(count + 1) memperbarui state dan komponen akan re-render dengan nilai baru.

Output di browser:

Counter: 0
[Klik tombol ➜ Counter: 1]

3. Menggunakan State dalam Class Component

Sebelum ada Hooks, state dikelola menggunakan this.state dalam Class Component.

📌 Contoh State di Class Component

import React, { Component } from 'react';

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

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h2>Counter: {this.state.count}</h2>
        <button onClick={this.increment}>Tambah</button>
      </div>
    );
  }
}

export default Counter;

📌 Penjelasan Kode:

• this.state = { count: 0 } → Mendeklarasikan state dalam constructor.
• this.setState({ count: this.state.count + 1 }) → Memperbarui state.
• Class Component membutuhkan this.setState() untuk memperbarui state, tidak bisa langsung mengubahnya.

4. Best Practices dalam Menggunakan State

Untuk memastikan penggunaan state tetap efisien dan terorganisir, berikut beberapa praktik terbaik:

✅ Gunakan State Secara Minimal

Jangan simpan data yang tidak perlu dalam state. Misalnya, jika suatu nilai bisa dihitung dari state lain, lebih baik dihitung langsung di render() daripada disimpan dalam state.

function Example() {
  const [length, setLength] = useState(10);
  const area = length * length; // Tidak perlu disimpan di state

  return <p>Luas: {area}</p>;
}

✅ Gunakan Fungsi dalam setState Jika Bergantung pada Nilai Sebelumnya

Saat memperbarui state berdasarkan nilai sebelumnya, gunakan fungsi untuk memastikan data yang diperoleh akurat.

setCount(prevCount => prevCount + 1);

Contoh penggunaan dalam React:

<button onClick={() => setCount(prevCount => prevCount + 1)}>Tambah</button>

Pada Class Component:

this.setState(prevState => ({ count: prevState.count + 1 }));

✅ Kelompokkan State yang Berhubungan

Alih-alih menyimpan banyak state terpisah, lebih baik gunakan state sebagai objek untuk mengelola banyak data yang saling terkait.

const [user, setUser] = useState({ name: "John", age: 25 });

const updateName = () => {
  setUser(prevUser => ({ ...prevUser, name: "Jane" }));
};

Pada Class Component:

this.setState(prevState => ({ ...prevState, name: "Jane" }));

5. Kapan Harus Menggunakan State?

✅ Gunakan state jika:

• Data berubah seiring waktu (misalnya input form, toggle button, dll).
• Komponen harus melakukan re-render berdasarkan perubahan data.
• Data hanya digunakan dalam komponen itu sendiri.

❌ Jangan gunakan state jika:

• Data bersifat statis dan tidak akan berubah (gunakan props).
• Data bisa dihitung dari informasi lain (gunakan variabel biasa atau fungsi).
• Data digunakan di banyak komponen (gunakan Context API atau Redux).

6. Kesimpulan

• State adalah cara React mengelola data yang bisa berubah seiring waktu.
• Function Component menggunakan useState(), sedangkan Class Component menggunakan this.state.
• Gunakan setState atau setState(prevState => {...}) untuk menghindari kesalahan pembaruan state.
• Simpan hanya data yang benar-benar diperlukan dalam state agar performa aplikasi tetap optimal.

Dengan memahami cara menulis state yang efektif, kita bisa membangun aplikasi React yang lebih terstruktur, mudah dikelola, dan responsif terhadap perubahan data!