Czy powinienem użyć jednego lub wielu useEffect w komponencie?

Wzór, którego musisz przestrzegać, zależy od Twojego zastosowania.

Po pierwsze , możesz mieć sytuację, w której musisz dodać detektor zdarzeń podczas początkowego montowania i wyczyścić je przy odmontowaniu, a także inny przypadek, w którym konkretny detektor musi zostać wyczyszczony i ponownie dodany przy zmianie właściwości. W takim przypadku korzystanie z dwóch różnych useEffect jest lepsze, aby zachować odpowiednią logikę razem, a także mieć korzyści z wydajności

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

Po Drugie: może być przypadek, w którym musisz wywołać wywołanie API lub inny efekt uboczny, gdy którykolwiek ze Stanów lub właściwości zmieni się między zestawem. W takim przypadku dobrym pomysłem powinien być pojedynczy useEffect z odpowiednimi wartościami do monitorowania

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

Trzeci: trzeci przypadek, gdy trzeba podjąć różne działania na zmianę różnych wartości. W takim przypadku należy oddzielić odpowiednie porównania na różne useEffects

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

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