Menggunakan useState - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Apa Itu useState?

Dalam React, useState adalah hook yang digunakan untuk mengelola state dalam komponen fungsional. Dengan useState, kita bisa menyimpan dan memperbarui data tanpa harus menggunakan class component.

Bayangkan state seperti kantong penyimpanan yang bisa berubah kapan saja, sedangkan useState adalah alat untuk mengelola isi kantong tersebut.

2. Cara Menggunakan useState

Pertama, kita perlu mengimpor useState dari React:

import { useState } from "react";

Kemudian, kita mendefinisikan state dalam komponen:

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

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

Dalam contoh ini:

• count adalah state yang menyimpan nilai angka.
• setCount adalah fungsi untuk mengubah nilai count.
• useState(0) berarti nilai awal count adalah 0.

3. Memahami Struktur useState

Saat kita memanggil useState, React mengembalikan array dengan dua nilai:

1. State saat ini (nilai terkini dari state).
2. Fungsi untuk memperbarui state.

Kita bisa menggunakannya seperti ini:

const [namaState, setNamaState] = useState(nilaiAwal);

Misalnya:

const [nama, setNama] = useState("Budi");

Artinya, nama akan memiliki nilai awal "Budi", dan jika ingin mengubahnya, kita harus menggunakan setNama.

4. useState dengan Tipe Data Berbeda

State tidak hanya bisa menyimpan angka, tetapi juga string, array, dan objek.

a) useState dengan String

const [nama, setNama] = useState("Anonim");

return <p>Halo, {nama}!</p>;

b) useState dengan Array

const [list, setList] = useState(["React", "Vue", "Angular"]);

return (
  <ul>
    {list.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

c) useState dengan Objek

const [user, setUser] = useState({ nama: "Budi", umur: 25 });

return <p>{user.nama} berumur {user.umur} tahun</p>;

5. Mengupdate State dengan useState

Saat mengubah state, jangan langsung mengubah nilai lama seperti ini:

//  SALAH
count = count + 1;

Karena React tidak akan tahu kalau ada perubahan! Gunakan fungsi setter:

//  BENAR
setCount(count + 1);

Untuk array dan objek, gunakan spread operator (...) agar tidak kehilangan data lama:

//  Update array dengan menambah item baru
setList([...list, "Svelte"]);

//  Update objek dengan mengubah satu properti
setUser({ ...user, umur: 26 });

6. Kesimpulan

 useState adalah hook untuk mengelola state dalam komponen fungsional.  Gunakan fungsi setter untuk memperbarui state, jangan ubah langsung.  State bisa berupa angka, string, array, atau objek.  Gunakan spread operator untuk mengupdate array dan objek agar tidak kehilangan data lama.

Dengan useState, React jadi lebih fleksibel dan lebih mudah digunakan. Jadi, siap main-main dengan state?