useState vs. useReducer di React: Memilih Hook Manajemen Status yang Tepat
Table of content:
Jika Anda ingin mendapatkan pekerjaan pengembangan web, Anda akan memiliki kesempatan yang lebih baik untuk berhasil jika Anda mempelajari perpustakaan React JavaScript. React adalah salah satu library yang paling banyak digunakan di industri ini. Dan salah satu fitur paling menarik dari perpustakaan React adalah konsep hook.
Hooks hanyalah fungsi JavaScript yang mengisolasi dan memungkinkan Anda untuk menggunakan kembali logika dalam aplikasi React. Untuk manajemen negara bagian, ada dua pengait utama yang tersedia untuk Anda—yaitu useState kait dan useReducer kait.
Baca Juga:
Gambaran umum tentang Hook useState
Itu useState hook adalah cara paling umum untuk menangani status di React. Sintaks di bawah mengilustrasikan cara menggunakan pengait ini di aplikasi Anda:
const [state, setState] = useState(initialStateValue);
Di blok kode di atas, file negara variabel menyimpan data dalam memori di antara render. Dan setState adalah fungsi “setter” yang memanipulasi negara variabel.
Itu useState hook mengembalikan array dengan tepat dua elemen. Ini juga membutuhkan nilai awal untuk variabel status.
Misalnya, jika ingin mendefinisikan variabel status yang merepresentasikan usia pengguna, dengan nilai awal 17, begini caranya:
const [userAge, setUserAge] = useState(17);
Itu setUserAge fungsi bertanggung jawab untuk memodifikasi userAge variabel negara.
setUserAge(19);
Penting untuk diperhatikan bahwa memperbarui status, memicu perenderan ulang komponen, dan memperbarui variabel status secara tidak benar dapat mengakibatkan loop tak terbatas yang dapat merusak kode Anda.
Di React, tidak disarankan untuk memodifikasi status secara langsung (seperti yang ditunjukkan pada blok kode di bawah), karena perubahan ke variabel non-status tidak bertahan di antara render komponen.
userAge = 19;
Negara adalah lokal untuk komponen yang mendefinisikannya. Jika Anda memiliki komponen yang sama yang dirender di layar beberapa kali, setiap komponen akan memiliki status independennya sendiri.
function App(){
return (
<div>
<Switch />
<Switch />
</div>
)
}
Pada blok kode di atas, ada dua Mengalihkan komponen, tetapi setiap komponen menangani statusnya sendiri dan tidak bergantung pada komponen lain kecuali satu komponen berbagi statusnya dengan komponen lainnya.
React menangani pembaruan status dengan mengelompokkan. Ini berarti bahwa ketika Anda memanggil fungsi penyetel variabel status, variabel status tidak diperbarui hingga render ulang berikutnya.
Gambaran umum tentang Kait useReducer
useReducer adalah pengait React yang dapat berguna kapan pun Anda ingin menangani beberapa status terkait secara bersamaan. Sintaks untuk useReducer terlihat seperti ini:
const [state, dispatch] = useReducer(reducer, initialState)
Dibandingkan dengan useStatedi dalam useReducerada sebuah negara variabel dan a menugaskan fungsi yang mengirimkan tindakan hingga peredam fungsi yang menangani muatan dan memperbarui negara.
Misalnya, Anda sedang membuat aplikasi penghitung sederhana dengan tombol yang dapat mengatur ulang penghitung, menambah nilai penghitung, atau menurunkan nilai penghitung. Menggunakan useState kode Anda akan terlihat seperti ini:
function Counter(){ const [count, setCount] = useState(0);
return(
<div>
The count is: {count}
<div>
<button onClick={() => setCount(count + 1)}>Increase count</button>
<button onClick={() => setCount(0)}>Reset</button>
<button onClick={() => setCount(count - 1)}>Decrease Count</button>
</div>
</div>
)
}
Implementasi di atas bekerja dengan sempurna. Tetapi Anda juga dapat mencapai hasil yang sama dengan bantuan useReducer kait.
Contoh ini hanya dimaksudkan untuk menunjukkan bagaimana useReducer kait bekerja. Dalam aplikasi dunia nyata, useReducer berlebihan untuk skenario ini.
useReducer membuatnya lebih mudah untuk menangani status terkait dan logika kompleks berdasarkan jenis lulus dalam pengiriman tindakan obyek.
Misalnya, fungsi pengiriman dapat mengirim file tindakan objek yang terlihat seperti ini:
{type:"action_type", payload:state * 2}
Pertama impor useReducer kait, lalu tentukan peredam fungsi dengan parameter: negara dan yang dirusak tindakan obyek.
import {useReducer} from "react";function reducer(state, { type, payload }) {
if (type === 'countIncrease') {
return payload;
} else if (type === 'countDecrease') {
return payload;
} else if (type === 'countReset') {
return payload;
} else {
return state;
}
}
Setelah mendefinisikan peredam fungsi, Anda dapat membangun Menangkal komponen dengan useReducer kait.
function Counter() {
const [count, dispatch] = useReducer(reducer, 0);
return (
<div>
The count is: {count}
<div>
<button onClick={() => dispatch({ type: 'countIncrease', payload: count + 1 })}>
Increase count
</button>
<button onClick={() => dispatch({ type: 'countReset', payload: 0 })}>
Reset count
</button>
<button onClick={() => dispatch({ type: 'countDecrease', payload: count - 1 })}>
Increase count
</button>
</div>
</div>
);
}
Di blok kode di atas, tombol pertama mengirimkan tindakan bertipe countIncrease dengan muatan sebesar hitung +1. Tindakan ini bertanggung jawab untuk menambah nilai hitungan.
Tombol kedua mengirim tindakan tipe countReset dengan muatan 0 yang me-reset nilai hitungan kembali ke 0.
Tombol ketiga mengirim tindakan tipe countDecrease dengan muatan sebesar hitungan – 1 yang mengurangi nilai hitungan sebesar 1.
Memilih Antara useState dan useReducer Hooks
Sekarang, Anda mengerti cara menggunakannya useState Dan useReducer kait, penting untuk mengetahui kapan harus menggunakan yang benar.
Jika keadaan Anda tidak memerlukan logika yang rumit, maka jelas menggunakan useReducer bisa berlebihan.
Jika status Anda bukan JavaScript primitif seperti angka, string, dan nilai boolean, Anda harus menggunakan the useState kait. Dan jika jenis status adalah objek atau larik, maka Anda harus mempertimbangkan untuk menggunakannya useReducer alih-alih.
Saat aplikasi Anda tumbuh dalam kompleksitas, menjadi sulit untuk menangani status hanya dengan useState Dan useReducer kait.
Ini adalah saat Anda dapat menggunakan perpustakaan eksternal seperti Redux, Jotai, dan Zustand. Pustaka ini memudahkan untuk menangani perubahan status di beberapa komponen.
Membuat Manajemen Negara Lebih Mudah Dengan Perpustakaan JavaScript
Pustaka seperti React, Vue, dan Svelte semuanya memiliki caranya sendiri dalam menangani status. Menangani manajemen status Anda sendiri dengan vanilla JavaScript jelas merupakan sesuatu yang dapat Anda coba, tetapi jauh lebih mudah dan nyaman untuk menggunakan pustaka JavaScript yang telah teruji pertempuran.
Jika Anda membuat aplikasi yang kompleks menggunakan React di mana Anda perlu mengelola beberapa komponen, Redux mungkin merupakan pilihan terbaik untuk Anda.
Artikel Terkait
