ฉันควรใช้ useEffect อย่างใดอย่างหนึ่งหรือหลายอย่างในส่วนประกอบ?

ฉันมีผลข้างเคียงที่จะนำไปใช้และต้องการทราบวิธีจัดระเบียบ:

• เป็นการใช้งานครั้งเดียว
• หรือใช้หลายอย่าง

อะไรที่ดีกว่าในแง่ของประสิทธิภาพและสถาปัตยกรรม?

รูปแบบที่คุณต้องปฏิบัติตามขึ้นอยู่กับ useCase ของคุณ

ขั้นแรกคุณอาจมีสถานการณ์ที่คุณต้องเพิ่มตัวฟังเหตุการณ์ในระหว่างการเมาท์ครั้งแรกและทำความสะอาดที่ unmount และอีกกรณีหนึ่งที่ต้องทำความสะอาดตัวฟังเฉพาะและเพิ่มใหม่ในการเปลี่ยนเสา ในกรณีเช่นนี้การใช้ useEffect ที่แตกต่างกันสองแบบจะดีกว่าเพื่อให้ตรรกะที่เกี่ยวข้องเข้าด้วยกันและมีประโยชน์ด้านประสิทธิภาพ

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

ประการที่สอง:อาจมีบางกรณีที่คุณต้องทริกเกอร์การเรียก API หรือผลข้างเคียงอื่น ๆ เมื่อสถานะหรืออุปกรณ์ประกอบฉากใด ๆ เปลี่ยนไประหว่างชุด ในกรณีเช่นนี้ค่าเดียวที่useEffectมีค่าที่เกี่ยวข้องในการตรวจสอบควรเป็นความคิดที่ดี

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

ประการที่สาม:กรณีที่สามเมื่อคุณจำเป็นต้องดำเนินการต่างๆในการเปลี่ยนแปลงค่าต่างๆ ในกรณีนี้ให้แยกการเปรียบเทียบที่เกี่ยวข้องออกเป็นข้อ ๆuseEffects

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

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

คุณควรใช้เอฟเฟกต์หลายอย่างเพื่อแยกข้อกังวลตามที่ reactjs.org https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns แนะนำ