React JS: useState Hook

Jika Anda baru mengenal React, salah satu konsep paling penting yang perlu anda pahami adalah "state". Namun, sebelum membahas apa itu state, mari kita pahami terlebih dahulu alasan mengapa React diciptakan.

The Beginning

Pada awalnya, pengembangan antarmuka web yang interaktif tidaklah sesederhana sekarang. Setiap kali data berubah, misalnya saat pengguna mengklik tombol like, jumlah like pada tampilan tidak secara otomatis berubah mengikuti perubahan yang terjadi pada data, sehingga para pengembang harus secara manual memanipulasi DOM (Document Object Model) menggunakan JavaScript atau library seperti jQuery untuk memperbarui tampilan. Seiring meningkatnya kompleksitas pada project yang dikerjakan, cara ini akan membuat project semakin rumit untuk dikelola dan mudah menimbulkan kesalahan.

Berangkat dari permasalahan tersebut, pada tahun 2013 tim engineer Facebook mempublikasikan sebuah library bernama "React".

Alih-alih mengatur tampilan secara manual melalui DOM, React memperkenalkan cara otomatis untuk memperbarui tampilan ketika terjadi perubahan data di dalam state. Oleh sebab itu, library tersebut diberi nama React (be-reaksi terhadap perubahan). Inilah ide utama yang membuat React menjadi library frontend yang begitu popular pada saat ini.

Mari Berkenalan Dengan State

Seperti pada penjelasan di atas, React mampu memperbarui tampilan secara otomatis ketika terjadi perubahan data. Kemampuan ini dimungkinkan berkat adanya state di dalam React. Pada dasarnya, state memiliki kemiripan dengan variable, karena keduanya sama-sama digunakan untuk menyimpan dan mengelola data. Hanya saja, terdapat perbedaan penting dimana ketika kita menggunakan variable biasa, perubahan nilainya tidak akan memicu pembaruan tampilan (UI). Sebaliknya, ketika menggunakan state, setiap kali nilainya berubah, maka React akan melakukan re-render pada komponen terkait, sehingga tampilan (UI) akan ter-update menyesuaikan dengan nilai state yang terbaru.

Apa Itu useState?

useState merupakan salah satu React Hooks yang digunakan untuk membuat dan mengupdate state di dalam functional component. Sebelum membuat state dengan useState, kita perlu mengimpornya terlebih dahulu seperti berikut:

import { useState } from 'react';

Cara Menggunakan useState

Sintaks dasar dari useState adalah sebagai berikut:

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

Mari kita breakdown sintaks di atas:

• state: Variable yang menyimpan nilai state saat ini
• setState: Fungsi yang digunakan untuk mengupdate nilai state
• initialValue: Nilai awal dari state ketika komponen pertama kali di-render

Contoh Penggunaan useState

Berikut adalah contoh sederhana penggunaan useState untuk membuat counter:

import { useState } from 'react';
 
function CounterBenar() {
  // Inisialisasi state 'count' dengan nilai awal 0
  const [count, setCount] = useState(0);
 
  const handleIncrement = () => {
    // Perbarui state 'count' dengan nilai baru
    setCount(count + 1);
  };
 
  return (
    <div>
      <p>Anda telah menekan tombol sebanyak {count} kali</p>
      <button onClick={handleIncrement}>
        Tambah
      </button>
    </div>
  );
}

Pada contoh di atas:

1. Kita membuat state count dengan nilai awal 0
2. Ketika tombol "Tambah" diklik, fungsi handleIncrement akan dijalankan
3. Fungsi tersebut memanggil setCount(count + 1) untuk mengupdate nilai pada state count
4. React akan melakukan re-render komponen dan menampilkan nilai count yang baru

Tipe Data

useState tidak hanya bisa menyimpan angka, tetapi juga string, boolean, array, object, dan tipe data lainnya:

// String
const [name, setName] = useState('John');
 
// Boolean
const [isOpen, setIsOpen] = useState(false);
 
// Array
const [todos, setTodos] = useState([]);
 
// Object
const [user, setUser] = useState({ name: '', age: 0 });
``