Haruskah saya menggunakan satu atau banyak useEffect dalam komponen?


116

Saya memiliki beberapa efek samping untuk diterapkan dan ingin tahu bagaimana mengaturnya:

  • sebagai satu useEffect
  • atau beberapa useEffects

Apa yang lebih baik dalam hal kinerja dan arsitektur?

Jawaban:


176

Pola yang perlu Anda ikuti bergantung pada useCase Anda.

Pertama , Anda mungkin memiliki situasi di mana Anda perlu menambahkan pendengar acara selama pemasangan awal dan membersihkannya saat melepas dan kasus lain di mana pendengar tertentu perlu dibersihkan dan ditambahkan kembali pada perubahan prop. Dalam kasus seperti itu, menggunakan dua useEffect yang berbeda lebih baik untuk menjaga logika yang relevan tetap bersama serta memiliki manfaat kinerja

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

Kedua: Mungkin ada kasus di mana Anda perlu memicu panggilan API atau beberapa efek samping lainnya ketika salah satu status atau alat peraga berubah di antara satu set. Dalam kasus seperti itu, satu orang useEffectdengan nilai-nilai yang relevan untuk dipantau harus menjadi ide yang bagus

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

Ketiga: Kasus ketiga ketika Anda perlu mengambil tindakan yang berbeda untuk mengubah nilai yang berbeda. Dalam kasus seperti itu, pisahkan perbandingan yang relevan menjadi beberapa perbandinganuseEffects

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])

1
bagaimana dengan jalan tengah antara contoh Kedua dan Ketiga di atas ?: Anda memiliki logika yang berjalan saat subset state / props berubah, tetapi masing-masing memiliki logika terpisah yang perlu dijalankan selain beberapa kode umum yang perlu dijalankan? Anda tidak akan menggunakan [](karena ini hanya bagian dari status / properti yang Anda tunggu perubahannya) tetapi Anda juga ingin menggunakan kembali kode. Apakah Anda menggunakan terpisah useEffectsdan meletakkan kode bersama dalam fungsi yang mereka panggil secara terpisah?
ecoe

2
Seperti yang disarankan oleh jawaban di bawah ini, tim React menyarankan untuk memisahkan hook berdasarkan perhatian, jadi Anda akan membaginya menjadi beberapa useEffectpanggilan.
hakazvaka

33
Saya suka bagaimana Anda menulis useCase.
VerticalGrain

Apakah mereka selalu dipicu dalam urutan definisi mereka? yaitu effect1 selalu dipanggil pertama, lalu effect2?
computrius

1
@computrius Ya ,React will apply every effect used by the component, in the order they were specified.
Agustus Janse

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.