Pengenalan React useState Hook

React adalah salah satu library JavaScript paling populer untuk membangun antarmuka pengguna (UI). Salah satu fitur utama yang membuat React sangat kuat adalah kemampuannya untuk mengelola state menggunakan Hooks. Di antara berbagai Hooks, useState adalah yang paling dasar dan paling banyak digunakan, terutama untuk menangani state dalam komponen fungsional.

Apa itu useState Hook?

useState adalah sebuah hook yang memungkinkan kita untuk menambahkan state ke dalam komponen fungsional di React. Dengan hook ini, kita dapat menyimpan nilai dan memperbarui nilai tersebut seiring perubahan UI. Mari kita lihat cara penggunaan dasar dari useState.

Cara Menggunakan useState

Untuk menggunakan useState, kita perlu mengimpor hook ini dari React dan kemudian memanggilnya dalam komponen kita. Berikut adalah sintaks dasar:

import React, { useState } from 'react';

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

    return (
        

            
Nilai saat ini: {state}
             setState(newValue)}>Update Nilai
        
    );
};

export default ContohComponent;

Contoh Nyata Penggunaan useState

Mari kita lihat contoh nyata menggunakan useState. Kita akan membuat komponen penghitung sederhana yang dapat ditingkatkan dengan mengklik tombol.

import React, { useState } from 'react';

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

    return (
        

            
Penghitung: {count}
             setCount(count + 1)}>Tambah
             setCount(count - 1)}>Kurangi
        
    );
};

export default Counter;

Poin Penting tentang useState

• Array Destructuring: useState mengembalikan array dengan dua elemen: nilai state dan fungsi untuk memperbarui state.
• Initial State: Anda dapat menetapkan nilai awal ketika menggunakan useState. Nilai ini akan digunakan saat komponen pertama kali dirender.
• Pembaruan State Asinkron: Perlu diingat bahwa pemanggilan fungsi setState bersifat asinkron, jadi jika Anda ingin menggunakan nilai terbaru state, sebaiknya gunakan callback.
• Fungsi Pemutakhiran: Anda juga dapat memberikan fungsi sebagai argumen ke setState untuk memastikan bahwa Anda bekerja dengan nilai state yang terbaru.

Kesimpulan

Dalam tutorial ini, kita telah membahas dasar-dasar penggunaan useState dalam React, serta memberikan contoh nyata untuk memudahkan pemahaman. Dengan menggunakan useState, Anda dapat dengan mudah mengelola state dalam komponen fungsional Anda. Jika Anda ingin memperdalam pengetahuan tentang React, kunjungi artikel kami di Panduan Lengkap React untuk Pemula 2025.