Manajemen state adalah konsep yang penting dalam aplikasi React, memastikan bahwa komponen-komponen di-render dan diperbarui secara efisien. Meskipun library eksternal seperti Redux dan MobX menyediakan solusi yang luas untuk manajemen state yang kompleks, React sendiri menawarkan hook bawaan untuk menangani state secara efektif: useState dan useReducer. Hooks ini menyederhanakan manajemen state lokal dan memungkinkan pengembang untuk menulis kode yang bersih dan mudah dipelihara. Pada artikel ini, kita akan mengeksplorasi useState dan useReducer, kasus penggunaannya, dan kapan harus memilih salah satunya.
Memahami useState
useState adalah hook manajemen state yang paling mudah dan paling banyak digunakan di React. Hook ini memungkinkan komponen fungsional dapat menggunakan dan memperbarui state tanpa menggunakan komponen kelas.
 |
| sumber: tasoskakour.com |
Sintaks
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
Bagaimana useState Bekerja
- Inisialisasi: useState mengambil nilai awal sebagai masukan.
- Variabel State & Fungsi Updater: Fungsi ini mengembalikan sebuah array, elemen pertama dari array tersebut adalah variabel state, elemen kedua adalah fungsi yang memperbarui state.
- Merender Ulang: Memanggil fungsi updater akan memicu render ulang komponen dengan state yang telah diperbarui.
Kapan Menggunakan useState
- Ketika Anda berurusan dengan state sederhana seperti angka, boolean, atau string.
- Dalam situasi di mana pembaruan state sederhana dan tanpa banyak logika yang terlibat.
- Ketika berurusan dengan perubahan berbasis UI, seperti ketika mengganti modal atau memperbarui beberapa input form.
Memahami useReducer
Meskipun useState cukup untuk manajemen state yang sederhana, useReducer berguna untuk transisi state yang kompleks. Fungsinya seperti Redux tetapi sudah terintegrasi dengan React.
Sintaks
import { useReducer } from 'react';const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:throw new Error('Unknown action type');}}function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>Increment</button><button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button></div>);}
Bagaimana useReducer Bekerja
- Inisialisasi: useReducer menerima fungsi peredam dan status awal.
- Status & Pengiriman: Fungsi ini mengembalikan status saat ini dan fungsi pengiriman yang dapat digunakan untuk memperbarui status.
- Tindakan & Fungsi Peredam: Fungsi peredam menjelaskan transisi state berdasarkan jenis tindakan.
Kapan Menggunakan useReducer
- Ketika Anda ingin mengelola logika state yang kompleks dengan beberapa sub-nilai.
- Ketika state berikutnya bergantung pada state sebelumnya.
- Saat menangani beberapa aksi yang memengaruhi state yang sama.
- Ketika bekerja dengan manajemen state yang lebih terstruktur mirip dengan Redux.
Memilih Antara useState dan useReducer
Fitur
- Kompleksitas
- Keterbacaan
- Kinerja
- Kasus Penggunaan
- Pembaruan status sederhana
- Lebih bersih untuk negara bagian kecil
- Efisien untuk pembaruan individual
- Input formulir, sakelar, penghitung
- Logika keadaan yang kompleks
- Lebih baik untuk logika terstruktur
- Efisien untuk beberapa pembaruan terkait
- Keranjang belanja, formulir dengan banyak bidang, status UI yang kompleks