Haruskah saya menggunakan satu atau banyak useEffect dalam komponen?

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?

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])

Anda harus menggunakan beberapa efek untuk memisahkan masalah seperti yang disarankan oleh reactjs.org https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns