React UseState

useState adalah salah satu Hook yang disediakan oleh React untuk mengelola state dalam functional components. Berikut adalah langkah-langkah penggunaannya:

Import useState: Pertama, impor useState dari React di komponen Anda.

import React, { useState } from 'react';

Inisialisasi State: Selanjutnya, inisialisasikan state menggunakan useState. Ini dilakukan dengan memanggil useState dan memberikan nilai awal state sebagai argumen. useState akan mengembalikan array dengan dua elemen: nilai state saat ini dan fungsi untuk mengubah nilai state tersebut.

const [state, setState] = useState(initialValue);

Di sini, state adalah variabel yang akan menyimpan nilai state, dan setState adalah fungsi yang akan digunakan untuk mengubah nilai state. initialValue adalah nilai awal dari state tersebut.

Mengakses Nilai State: Anda dapat mengakses nilai state dengan menggunakan state.

<p>Nilai state saat ini: {state}</p>

Mengubah Nilai State: Untuk mengubah nilai state, panggil fungsi setState dengan nilai baru.

setState(newValue);

Ini akan mengubah nilai state menjadi newValue dan memperbarui tampilan komponen secara otomatis.

Berikut adalah contoh lengkap penggunaan useState dalam sebuah komponen:

import React, { useState } from 'react';

function Example() {
  // Inisialisasi state dengan nilai awal 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Kamu menekan tombol sebanyak {count} kali</p>
      <button onClick={() => setCount(count + 1)}>
        Tekan aku
      </button>
    </div>
  );
}

export default Example;

Dalam contoh ini, setiap kali tombol ditekan, nilai count akan bertambah satu dan komponen akan melakukan rendering ulang dengan nilai count yang baru.