Should I use one or many useEffect in component?

Question

I have some side effects to apply and want to know how to organize them:

• as a single useEffect
• or several useEffects

What's better in terms of performance and architecture?

Answer 1

The pattern that you need to follow depends on your useCase.

First, You might have a situation where you need to add event listener during the initial mount and clean them up at unmount and another case where a particular listener needs to be cleaned up and re added on a prop change. In such a case, using two different useEffect is better to keep the relevant logic together as well as having performance benefits

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

Second: There may be a case where you need to trigger an API call or some other side-effect when any of the state or props change amongst a set. In such a case a single useEffect with the relevant values to monitor should be a good idea

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

Third: A third case in when you need to take different actions on change of different values. In such a case, separate out relevant comparisons into different useEffects

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

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