ReactJS - Menggunakan useState: Panduan untuk Pemula

Hai teman-teman, pengembang React masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan yang menarik ke dunia React hooks, khususnya hook useState. Sebagai seseorang yang telah mengajar pemrograman selama tahun tahun, saya dapat katakan bahwa memahami manajemen state seperti belajar menunggang sepeda - mungkin terlihat gembleng awalnya, tapi setelah Anda menguasainya, Anda akan mengendarai proyek React Anda dengan mudah!

Apa Itu useState dan Mengapa Kita Butuhnya?

Sebelum kita masuk ke detailnya, mari bicarakan mengapa kita memerlukan useState pertama kali. Bayangkan Anda sedang membuat aplikasi penghitung sederhana. Anda ingin menampilkan sebuah angka dan memiliki tombol untuk meningkatkan atau menurunkannya. Bagaimana Anda akan melacak angka saat ini? Itu di tempat useState berada!

useState adalah hook React yang memungkinkan kita untuk menambahkan state ke komponen fungsional kita. Itu seperti memberikan komponen Anda ingatan untuk mengingat hal-hal antara render.

Fitur useState

Mari kitauraikan fitur utama useState:

Fitur	Deskripsi
Menambahkan state ke komponen fungsional	useState memungkinkan kita untuk menggunakan state di dalam komponen fungsional, yang sebelumnya hanya dimungkinkan di dalam komponen kelas.
Mengembalikan array	useState mengembalikan array dengan dua elemen: nilai state saat ini dan fungsi untuk mengupdate nya.
Dapat menahan nilai jenis apa saja	State dapat berupa bilangan, string, boolean, objek, array, atau jenis JavaScript lainnya.
Menimbulkan re-render	Ketika state diperbarui, itu menyebabkan komponen untuk re-render, mencerminkan state baru.

Sekarang kita tahu apa yang dapat dilakukan useState, mari kita lihatnya dalam tindakan!

Menggunakan Hook State

Mari kita mulai dengan contoh sederhana - aplikasi penghitung kita. Berikut adalah bagaimana kita dapat mengimplementasikannya menggunakan useState:

import React, { useState } from 'react';

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

return (
<div>
<p Anda menekan {count} kali</p>
<button onClick={() => setCount(count + 1)}>
Klik saya
</button>
</div>
);
}

Mari kitauraikan ini:

1. Kita mengimpor useState dari React.
2. Di dalam komponen kita, kita panggil useState(0). Ini menciptakan variabel state bernama count dengan nilai awal 0.
3. useState mengembalikan array, yang kita urutkan ke count (state saat ini) dan setCount (fungsi untuk mengupdate state).
4. Dalam JSX kita, kita menampilkan count saat ini dan membuat tombol yang, ketika diklik, memanggil setCount untuk meningkatkan count.

Setiap kali tombol diklik, setCount dipanggil, memperbarui state dan memicu re-render komponen kita dengan nilai count baru.

Variabel State Ganda

Salah satu hal yang menarik tentang useState adalah Anda dapat menggunakannya berkali-kali dalam satu komponen. Mari kita perluas penghitung kita untuk termasuk nama:

function NamedCounter() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');

return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Masukkan nama Anda"
/>
<p>{name ? `${name}'s count` : 'Count'}: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}

Di sini, kita menggunakan useState dua kali - sekali untuk count dan sekali untuk input nama. Setiap variabel state adalah sepenuhnya independen, memungkinkan kita untuk mengelola beberapa bagian state dengan mudah.

Menggunakan Objek sebagai State

Meskipun menggunakan beberapa panggilan useState bekerja baik untuk state yang independen, kadang-kadang lebih mudah untuk mengelompokkan state yang berkaitan dalam objek. Mari kita lihat bagaimana kita dapat melakukan itu:

function UserProfile() {
const [user, setUser] = useState({
name: '',
age: 0,
hobby: ''
});

const handleChange = (e) => {
const { name, value } = e.target;
setUser(prevUser => ({
...prevUser,
[name]: value
}));
};

return (
<div>
<input
name="name"
value={user.name}
onChange={handleChange}
placeholder="Name"
/>
<input
name="age"
type="number"
value={user.age}
onChange={handleChange}
placeholder="Age"
/>
<input
name="hobby"
value={user.hobby}
onChange={handleChange}
placeholder="Hobby"
/>
<p>
{user.name} berusia {user.age} tahun dan menyukai {user.hobby}.
</p>
</div>
);
}

Dalam contoh ini, kita menggunakan panggilan useState tunggal untuk mengelola objek dengan beberapa properti. Fungsi handleChange menggunakan operator spread (...) untuk menciptakan objek baru dengan semua properti sebelumnya, kemudian memperbarui properti tertentu yang berubah.

Pendekatan ini dapat sangat berguna saat berurusan dengan formulir atau situasi lain di mana Anda memiliki beberapa bagian state yang berkaitan.

Catatan Peringatan

Ketika menggunakan objek (atau array) sebagai state, selalu ingat untuk menciptakan objek baru saat memperbarui state, bukan mengubah objek yang ada. React menggunakan kesetaraan referensi untuk menentukan apakah state telah berubah, jadi mengubah properti objek secara langsung tidak akan memicu re-render.

Kesimpulan

Dan itu dia, teman-teman! Kita telah melakukan perjalanan melalui negeri useState, dari penghitung sederhana hingga manajemen state objek kompleks. Ingat, seperti setiap keterampilan baru, memahami useState memerlukan latihan. Jangan frustasi jika itu tidak langsung berjalan - terus mencoba, dan segera Anda akan mengelola state seperti seorang pro!

Sebelum kita berpisah, mari melakukan peninjauan cepat apa yang kita pelajari:

1. useState memungkinkan kita untuk menambahkan state ke komponen fungsional.
2. Itu mengembalikan array dengan state saat ini dan fungsi untuk mengupdate nya.
3. Kita dapat menggunakan useState berkali-kali untuk state yang independen.
4. Objek dapat digunakan sebagai state untuk mengelompokkan data yang berkaitan.
5. Selalu buat objek baru saat memperbarui state objek.

Sekarang pergi dan buat aplikasi React yang menakjubkan dan berstate! Dan ingat, di dunia React, satu-satunya konstanta adalah perubahan (state, itu adalah halnya)!

Credits: Image by storyset