[ad_1]
Melanjutkan seri kami tentang Reaksikhususnya React hooks, mari kita lihat useEffect
kait. Ini adalah hook yang sangat kuat yang memungkinkan Anda untuk menangani efek samping dari perubahan status atau prop serta membuat fungsionalitas on-mount yang mirip dengan componentDidMount
dalam komponen kelas.

Dengan demikian, kait ini sering digunakan untuk permintaan asinkron seperti memuat data untuk komponen segera setelah komponen tersebut dirender atau memuat data baru berdasarkan perubahan nilai lain. Meskipun banyak kegunaannya, membuat fungsi semacam ini bisa jadi rumit dan Anda mungkin akan mendapatkan peringatan seperti useEffect must not return anything besides a function, which is used for clean-up
.
Masalah
Seperti yang disebutkan sebelumnya, ingin melakukan sesuatu secara tidak sinkron di dalam useEffect
adalah kasus penggunaan umum untuk kait ini. Misalnya, bayangkan Anda memiliki komponen yang menampilkan daftar pengguna tetapi pengguna tersebut berasal dari database sehingga Anda harus memintanya saat memuat halaman. Dalam bentuknya yang paling sederhana, Anda mungkin memiliki komponen seperti ini:
const UsersComponent = () => {
const [users, setUsers] = useState([]);
const [usersLoading, setUsersLoading] = useState(false);
useEffect(async () => {
setUsersLoading(true);
const result = await getUsers();
setUsers(result);
setUsersLoading(false);
}, []);
return (
<div>
<h1>Users</h1>
<div>
{users.map((user) => (
<div key={user.id}>{user.username}</div>
))}
</div>
</div>
);
};
Code language: JavaScript (javascript)
Di sini Anda dapat melihat pengaturan dasar untuk komponen yang dijelaskan di atas. Saat halaman dimuat, komponen harus memuat pengguna dari API dan setelah selesai, komponen akan memperbarui statusnya. Terlihat bagus, tapi ini akan memicu useEffect must not return anything besides a function, which is used for clean-up
peringatan yang disebutkan di atas. Itu karena panggilan balik itu sendiri mengembalikan janji yang tidak sesuai dengan useEffect
.
Solusinya
Perbaikan di sini sebenarnya cukup sederhana. Anda harus membungkus pekerjaan asinkron Anda dalam suatu fungsi dan kemudian memanggilnya dari useEffect
panggilan balik. Inilah solusi itu menggunakan contoh di atas:
const UsersComponent = () => {
const [users, setUsers] = useState([]);
const [usersLoading, setUsersLoading] = useState(false);
useEffect(() => {
const loadData = async () => {
setUsersLoading(true);
const result = await getUsers();
setUsers(result);
setUsersLoading(false);
};
loadData();
}, []);
return (
<div>
<h1>Users</h1>
{usersLoading && <div>Loading...</div>}
<div>
{users.map((user) => (
<div key={user.id}>{user.username}</div>
))}
</div>
</div>
);
};
Code language: JavaScript (javascript)
Ingatlah bahwa meskipun ini berhasil, Anda mungkin harus memperbaiki solusi Anda lebih lanjut untuk menangani kondisi balapan dan pembersihan panggilan asinkron Anda, tetapi itu di luar cakupan artikel ini.
Kesimpulan
Kait reaksi, panggilan asinkron, dan efek samping adalah topik yang rumit sehingga menggabungkannya bisa jadi sulit untuk dikatakan. Semoga solusi ini membantu kasus penggunaan Anda dan, seperti biasa, jangan ragu untuk meninggalkan umpan balik yang mungkin Anda miliki. Terima kasih sudah membaca!
[ad_2]
Source link