Bileşende bir veya daha fazla useEffect kullanmalı mıyım?

Bazı yan etkilerim var ve bunları nasıl organize edeceğimi bilmek istiyorum:

• tek kullanımlık olarak
• veya birkaç kullanım Etkisi

Performans ve mimari açısından daha iyi olan nedir?

Takip etmeniz gereken model, kullanım durumunuza bağlıdır.

İlk olarak , ilk bağlama sırasında olay dinleyicisi eklemeniz ve bunları kaldırırken temizlemeniz gereken bir durum olabilir ve belirli bir dinleyicinin temizlenmesi ve bir özellik değişikliğinde yeniden eklenmesi gereken başka bir durum olabilir. Böyle bir durumda, iki farklı kullanım etkisi kullanmak, ilgili mantığı bir arada tutmak ve performans avantajlarına sahip olmak daha iyidir.

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

İkincisi: Bir küme arasında herhangi bir durum veya sahne değiştiğinde bir API çağrısını veya başka bir yan etkiyi tetiklemeniz gereken bir durum olabilir. Böyle bir durumda useEffect, izlenecek ilgili değerlere sahip bir bekar iyi bir fikir olmalıdır.

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

Üçüncüsü: Farklı değerlerin değiştirilmesi üzerine farklı eylemler gerçekleştirmeniz gerektiğinde üçüncü bir durum. Böyle bir durumda, ilgili karşılaştırmaları farklıuseEffects

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

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

Kaygıları ayırmak için reactjs.org https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns tarafından önerildiği gibi birden fazla efekt kullanmalısınız