ReactJS - Menggunakan useState: Panduan untuk Pemula

Hai teman-teman, pengembang React masa depan! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ini ke dunia hook React, khususnya hook useState. Sebagai seseorang yang telah mengajar pemrograman selama tahun tahun, saya bisa katakan bahwa memahami manajemen state seperti belajar menunggang sepeda - mungkin tampak bergek pada awalnya, tetapi setelah Anda menguasainya, Anda akan terus menerus melalui proyek React Anda dengan mudah!

Apa Itu useState dan Mengapa Kita Butuhnya?

Sebelum kita masuk ke detail, mari bicarakan mengapa kita memerlukan useState pertama-tama. Bayangkan Anda sedang membuat aplikasi penghitung sederhana. Anda ingin menampilkan sebuah nomor dan memiliki tombol untuk menambahkan atau mengurangi nilainya. Bagaimana Anda akan mengikuti hitungan saat ini? Itu adalah tempat useState berperan!

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 kunci useState:

Fitur	Deskripsi
Menambahkan state ke komponen fungsional	useState memungkinkan kita untuk menggunakan state di komponen fungsional, yang sebelumnya hanya dimungkinkan di 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 nomor, string, boolean, objek, array, atau jenis JavaScript lainnya.
Menimbulkan re-render	Ketika state terupdate, itu menyebabkan komponen untuk merender ulang, mencerminkan state baru.

Sekarang kita tahu apa yang useState mampu lakukan, mari kita lihat nya dalam tindakan!

Menggunakan Hook State

Mari kita mulai dengan contoh sederhana - aplikasi penghitung kita. Berikut cara mengimplementasikannya menggunakan useState:

import React, { useState } from 'react';

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

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

mariuraikan ini:

1. Kita mengimpor useState dari React.
2. Dalam komponen kita, kita panggil useState(0). Ini menciptakan variabel state yang disebut count dengan nilai awal 0.
3. useState mengembalikan array, yang kita uraikan menjadi count (state saat ini) dan setCount (fungsi untuk mengupdate state).
4. Dalam JSX kita, kita tampilkan count saat ini dan membuat tombol yang, saat diklik, memanggil setCount untuk menambah count.

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

Variabel State Ganda

Salah satu hal yang menarik tentang useState adalah Anda dapat menggunakannya berkali-kali dalam satu komponen. Mari kita luaskan 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 namamu"
/>
<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 ini sepenuhnya independen, memungkinkan kita untuk mengelola beberapa piece state dengan mudah.

Menggunakan Objek sebagai State

Meskipun menggunakan beberapa panggilan useState bekerja sangat baik untuk piece state yang independen, kadang-kadang lebih mudah untuk mengelompokkan state yang terkait 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 bisa sangat berguna saat berurusan dengan formulir atau setiap situasi di mana Anda memiliki beberapa piece state yang terkait.

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 adalah dia, teman-teman! Kita telah menjelajahi negeri useState, dari penghitung sederhana hingga manajemen state objek kompleks. Ingat, seperti setiap kemampuan baru, menguasai 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 rangkum 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 piece state yang independen.
4. Objek dapat digunakan sebagai state untuk mengelompokkan data terkait.
5. Selalu buat objek baru saat memperbarui state objek.

Sekarang pergi dan buat aplikasi React yang menarik dan stateful! Dan ingat, di dunia React, satu-satunya konstanta adalah perubahan (dari state, itu tentu saja)!

Credits: Image by storyset