Jika Anda baru mengenal React, Anda mungkin bertanya-tanya apa itu React Hooks dan kapan Anda harus menggunakannya. React hanya memperkenalkan hook dalam rilis 16.8 tetapi hook dengan cepat menjadi fitur penting dari library.
Pelajari semua tentang dasar-dasar React Hooks dan temukan beberapa praktik terbaik untuk menggunakannya dalam aplikasi React Anda.
Apa itu React Hooks?
React Hooks memungkinkan Anda menggunakan status dan fitur React lainnya tanpa menulis kode tambahan. Hooks adalah cara yang bagus untuk membuat kode Anda lebih mudah dibaca dan dipelihara.
Ada beberapa Hooks yang berbeda di React, tetapi yang paling umum digunakan adalah useState dan useEffect. Kait useState memungkinkan Anda menambahkan status ke komponen Anda. Ini berguna untuk hal-hal seperti melacak masukan pengguna atau perubahan pada formulir. Kait useEffect memungkinkan Anda menjalankan fungsi setiap kali komponen dirender. Ini berguna untuk hal-hal seperti mengambil data dari API atau menyiapkan langganan.
Kapan Anda Harus Menggunakan React Hooks?
Anda harus menggunakan React Hooks kapan pun Anda perlu menambahkan fungsionalitas tambahan ke suatu komponen. Misalnya, jika Anda perlu melacak input pengguna, Anda akan menggunakan hook useState. Jika Anda perlu mengambil data dari API, Anda akan menggunakan hook useEffect. Anda juga bisa buat pengait khusus untuk panggilan API.
Jika Anda baru mulai menggunakan React, Anda mungkin belum perlu menggunakan Hooks. Namun saat Anda membangun aplikasi yang lebih kompleks, Anda akan menemukan bahwa Hooks adalah cara yang bagus untuk menambahkan fungsionalitas ekstra ke komponen Anda.
Praktik Terbaik Dengan React Hooks
Sekarang setelah Anda mengetahui apa itu React Hooks dan kapan menggunakannya, mari kita bahas beberapa praktik terbaik.
1. Hanya Call Hooks Dari React Functions
Anda sebaiknya hanya memanggil React Hooks dari fungsi React. Jika Anda mencoba memanggil react hook dari komponen kelas, Anda akan mendapatkan pesan kesalahan.
Ini karena Anda hanya dapat memanggil React Hook dari fungsi React. Fungsi React adalah komponen yang Anda deklarasikan dengan kata kunci function.
Berikut adalah contoh komponen fungsi React:
impor Bereaksi, { useState } dari 'reaksi';fungsiAplikasi() {
const [hitung, setCount] = useState(0);
kembali (
<div>
<P>{menghitung}</P>
<tombol onClick={() => setCount (hitung + 1)}>
Klik saya
</button>
</div>
);
}
Dan inilah contoh komponen kelas:
impor Bereaksi, { Komponen } dari 'reaksi';kelasAplikasimemanjangKomponen{
negara bagian = {
menghitung: 0
};
render() {
kembali (
<div>
<P>{this.state.count}</P>
<tombol onClick={() => this.setState({ count: this.state.count + 1 })}>
Klik saya
</button>
</div>
);
}
}
Contoh pertama mendeklarasikan komponen App menggunakan kata kunci function, sedangkan yang kedua menggunakan kata kunci class.
2. Gunakan Hanya Satu useEffect Hook
Jika Anda menggunakan hook useEffect, Anda sebaiknya hanya menggunakan satu per komponen. Ini karena useEffect berjalan setiap kali komponen di-render.
Jika Anda memiliki beberapa hook useEffect, semuanya akan berjalan setiap kali komponen dirender. Ini dapat menyebabkan masalah perilaku dan kinerja yang tidak terduga. Dalam contoh di bawah ini, kedua useEffects akan dijalankan setiap kali komponen Aplikasi dirender.
impor Bereaksi, { useState, useEffect } dari 'reaksi';fungsiAplikasi() {
const [hitung, setCount] = useState(0);gunakanEfek(() => {
konsol.log('Ini akan berjalan setiap kali komponen Aplikasi dirender!');
}, []);gunakanEfek(() => {
konsol.log('Ini juga akan berjalan setiap kali komponen Aplikasi dirender!');
}, []);
kembali (
<div>
<P>{menghitung}</P>
<tombol onClick={() => setCount (hitung + 1)}>
Klik saya
</button>
</div>
);
}
Alih-alih menggunakan beberapa kait useEffect, Anda dapat menggunakan satu kait useEffect dan memasukkan semua kode Anda ke dalamnya. Dalam contoh di bawah ini, hanya satu hook useEffect yang akan dijalankan setiap kali komponen Aplikasi dirender.
impor Bereaksi, { useState, useEffect } dari 'reaksi';fungsiAplikasi() {
const [hitung, setCount] = useState(0);gunakanEfek(() => {
konsol.log('Ini akan berjalan setiap kali komponen Aplikasi dirender!');
konsol.log('Ini juga akan berjalan setiap kali komponen Aplikasi dirender!');
}, []);
kembali (
<div>
<P>{menghitung}</P>
<tombol onClick={() => setCount (hitung + 1)}>
Klik saya
</button>
</div>
);
}
Ini berarti Anda hanya dapat memanggil React Hooks dari contoh pertama. Jika Anda mencoba memanggil React Hooks dari contoh kedua, Anda akan mendapatkan pesan kesalahan.
3. Gunakan Kait di Tingkat Atas
Salah satu praktik terbaik dengan React Hooks adalah menggunakannya di tingkat teratas. Anda harus menghindari penggunaan kait di dalam loop, kondisi, atau fungsi bersarang. Misalnya, jika Anda menggunakanState di dalam for loop, setiap kali loop berjalan, React akan membuat variabel status baru. Ini dapat menyebabkan perilaku yang tidak terduga.
impor Bereaksi, { useState } dari 'reaksi';fungsiAplikasi() {
untuk (membiarkan saya = 0; saya < 10; saya++) {
// Jangan lakukan ini!
const [hitung, setCount] = useState(0);
}
kembali (
<div>
<P>{menghitung}</P>
<tombol onClick={() => setCount (hitung + 1)}>
Klik saya
</button>
</div>
);
}
Dalam contoh di atas, komponen App hanya akan merender hitungan dan tombol dari iterasi akhir loop. Ini karena React hanya memperbarui variabel status dari iterasi terakhir.
Alih-alih menggunakanState di dalam loop, Anda dapat mendeklarasikan variabel status di luar loop. Dengan cara ini, React hanya akan membuat satu variabel status dan memperbaruinya.
impor Bereaksi, { useState } dari 'reaksi';fungsiAplikasi() {
// Ini adalah cara yang benar untuk menggunakan useState di dalam sebuah loop
const [hitung, setCount] = useState(0);untuk (membiarkan saya = 0; saya < 10; saya++) {
// ...
}
kembali (
<div>
<P>{menghitung}</P>
<tombol onClick={() => setCount (hitung + 1)}>
Klik saya
</button>
</div>
);
}
4. Jangan terlalu sering menggunakan Hook
React Hooks adalah alat yang ampuh, tetapi Anda harus menghindari penggunaannya secara berlebihan. Jika Anda menemukan diri Anda menggunakan banyak Hook di setiap komponen, Anda mungkin menggunakannya secara berlebihan.
React Hooks paling berguna saat Anda perlu berbagi status di antara banyak komponen. Hindari penggunaan Hooks yang tidak perlu karena dapat membuat kode Anda sulit dibaca, dan dapat memengaruhi kinerja jika digunakan secara berlebihan.
Tambahkan Lebih Banyak Fungsi Menggunakan React 18 Hooks
Dengan dirilisnya React 18, ada pengait baru yang tersedia. Setiap pengait khusus untuk fitur React tertentu. Anda dapat menemukan daftar semua pengait yang tersedia di situs web React. Namun hook yang paling umum digunakan adalah useState dan useEffect.
