How to deal with listening to multiple changes using useEffect?

user_3629015 0
Viewed 86

I have multiple values I'm listening to and different actions to perform for those values. Problem is that I don't know what is the best way to prevent them from running on first render. Let's say I have:

const [firstValue, setFirstValue] = useState();
const [secondValue, setSecondValue] = useState();
const [thirdValue, setThirdValue] = useState();
const [fourthValue, setFourthValue] = useState();
const [fifthValue, setFifthValue] = useState();

useEffect(()={
   // action 1
},[firstValue, secondValue, thirdValue])

useEffect(()={
   // action 2
},[fourthValue])

useEffect(()={
   // action 3
},[fifthValue])

I looked into isMounted = useRef(false) example, but it works only if you have just 1 extra useEffect.

use-effect react-hooks reactjs
2 Answers

If the expected functionality is to prevent execution of a code inside useEffect during initial rendering, just keep the code inside an if condition which will check if each of the states have the values that is not the initial value of that state.

Ex:

const [firstValue, setFirstValue] = useState(null);
const [secondValue, setSecondValue] = useState(null);
const [thirdValue, setThirdValue] = useState(null);
const [fourthValue, setFourthValue] = useState(null);
const [fifthValue, setFifthValue] = useState(null);

useEffect(()={
if(firstValue!==null&&secondValue!==null&&thirdValue!==null){
   // action 1
}
},[firstValue, secondValue, thirdValue])
user_183385280

I looked into isMounted = useRef(false) example, but it works only if you have just 1 extra useEffect.

I think you are assuming you must update the isMounted ref within the first useEffect hook in the component.

Remember that all hooks are called each render cycle in the order they are declared. If you want all three useEffect hooks to skip the initial render then don't update the isMounted ref until after all three have had a chance to run at least once.

Example:

const [firstValue, setFirstValue] = useState();
const [secondValue, setSecondValue] = useState();
const [thirdValue, setThirdValue] = useState();
const [fourthValue, setFourthValue] = useState();
const [fifthValue, setFifthValue] = useState();

const isMountedRef = useRef(false);

useEffect(()={
  // action 1
}, [firstValue, secondValue, thirdValue]);

useEffect(()={
  // action 2
}, [fourthValue]);

useEffect(()={
  // action 3
}, [fifthValue]);

useEffect(() => {
  isMountedRef.current = true; // <-- now mutate the ref
}, []);
user_86908570
Related