Mengenal useState pada React.js

sebelum kita mulai mengenal useState.

kita harus tahu dulu apa itu state.

jadi apa itu state? singkatnya DATA YANG BISA BERUBAH. contohnya, status login pengguna, data yang diambil dari API, atau nilai input dari form dll.

useState adalah hook yang digunakan dalam React untuk menyimpan dan mengelola state di dalam komponen fungsional.

Bagaimana useState Bekerja?

useState mengembalikan sebuah array dengan dua elemen:

1. Nilai State: Nilai saat ini dari state.

2. Fungsi Penyetel (Setter): Fungsi yang digunakan untuk memperbarui nilai state.
   

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

state: Nilai saat ini dari state.

setState: Fungsi yang digunakan untuk memperbarui state.

initialState: Nilai awal dari state.

Contoh Penggunaan useState
Berikut adalah contoh sederhana penggunaan useState dalam sebuah komponen fungsional:

import React, { useState } from 'react';

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

    // Fungsi untuk menambah nilai state
    const increment = () => {
        setCount(count + 1);
    };

    // Fungsi untuk mengurangi nilai state
    const decrement = () => {
        setCount(count - 1);
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    );
}

export default Counter;

Penjelasan Contoh

1. Inisialisasi State:

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

count adalah nilai saat ini dari state.

setCount adalah fungsi yang digunakan untuk memperbarui nilai count.

0 adalah nilai awal dari state.

1. Fungsi Pembaruan State:

const increment = () => {
    setCount(count + 1);
};

const decrement = () => {
    setCount(count - 1);
};

increment menambah nilai count dengan 1.

decrement mengurangi nilai count dengan 1.

1. Render Komponen:

return (
    <div>
        <p>Count: {count}</p>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
    </div>
);

Komponen akan menampilkan nilai count saat ini.

Tombol "Increment" dan "Decrement" memanggil fungsi increment dan decrement saat diklik, yang akan memperbarui nilai count.

Dengan demikian, useState adalah hook yang sangat berguna untuk mengelola state dalam komponen fungsional di React, memungkinkan kita untuk membangun aplikasi yang lebih dinamis dan interaktif.