5 Contoh Penggunaan useState

Dalam React, useState adalah salah satu hook yang paling sering digunakan untuk mengelola state dalam komponen fungsional. Dengan useState, kita dapat menyimpan dan memperbarui nilai tanpa perlu menggunakan class component. Berikut adalah lima contoh penggunaan useState dalam berbagai situasi!

1. Mengelola Input Form

Saat membuat form, kita sering kali perlu menyimpan nilai input. Dengan useState, kita dapat memperbarui nilai input dengan mudah.

import { useState } from "react";

function InputForm() {
  const [name, setName] = useState("");

  return (
    <input
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="Masukkan nama"
    />
  );
}

2. Membuat Toggle Mode (Dark/Light Mode)

Kita bisa menggunakan useState untuk mengubah tema aplikasi dengan satu klik.

import { useState } from "react";

function ThemeToggle() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <button onClick={() => setDarkMode(!darkMode)}>
      {darkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}
    </button>
  );
}

3. Menghitung Klik (Counter)

Salah satu contoh paling dasar dari useState adalah membuat penghitung sederhana.

import { useState } from "react";

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

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

4. Menampilkan atau Menyembunyikan Elemen

Kita dapat menggunakan useState untuk menampilkan atau menyembunyikan elemen dengan mudah.

import { useState } from "react";

function ShowHideText() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setVisible(!visible)}>
        {visible ? "Sembunyikan" : "Tampilkan"} Teks
      </button>
      {visible && <p>Ini adalah teks yang bisa disembunyikan.</p>}
    </div>
  );
}

5. Mengelola Daftar Item (Todo List)

useState juga bisa digunakan untuk mengelola daftar item seperti todo list.

import { useState } from "react";

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState("");

  const addTask = () => {
    setTodos([...todos, task]);
    setTask("");
  };

  return (
    <div>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
      />
      <button onClick={addTask}>Tambah</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

Kesimpulan

Hook useState sangat fleksibel dan dapat digunakan dalam berbagai skenario. Dari mengelola input form hingga mengelola daftar item dalam aplikasi, useState memungkinkan kita untuk mengontrol state dengan mudah dalam komponen fungsional React.

Coba implementasikan useState dalam proyek React kamu dan rasakan kemudahannya! 🚀