Tôi có nên sử dụng một hay nhiều useEffect trong thành phần?

Tôi có một số tác dụng phụ cần áp dụng và muốn biết cách tổ chức chúng:

• như một lần sử dụng
• hoặc một số cách sử dụng

Có gì tốt hơn về mặt hiệu suất và kiến ​​trúc?

Mẫu mà bạn cần tuân theo tùy thuộc vào useCase của bạn.

Đầu tiên , Bạn có thể gặp trường hợp cần thêm trình xử lý sự kiện trong lần gắn kết ban đầu và dọn dẹp chúng khi ngắt kết nối và một trường hợp khác trong đó một trình nghe cụ thể cần được dọn dẹp và thêm lại khi thay đổi chống đỡ. Trong trường hợp như vậy, sử dụng hai useEffect khác nhau sẽ tốt hơn để giữ logic liên quan cùng nhau cũng như có lợi ích về hiệu suất

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

Thứ hai: Có thể có trường hợp bạn cần kích hoạt lệnh gọi API hoặc một số tác dụng phụ khác khi bất kỳ trạng thái hoặc đạo cụ nào thay đổi giữa một tập hợp. Trong trường hợp như vậy, một đơn useEffectvới các giá trị liên quan để theo dõi sẽ là một ý tưởng hay

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

Thứ ba: Trường hợp thứ ba khi bạn cần thực hiện các hành động khác nhau khi thay đổi các giá trị khác nhau. Trong trường hợp như vậy, hãy tách các so sánh có liên quan thành cácuseEffects

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

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

Bạn nên sử dụng nhiều hiệu ứng để phân tách các mối quan tâm theo đề xuất của reactjs.org https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns