React Redux: Useeffect calling multiple times - reactjs

Question

I am trying to add click even listener to div based class name, here the code looks,
useEffect(() => {
const element = document.querySelectorAll('some-class');
element[0].addEventListener('click',(e)=>{
If(isTrigger)
{
dispatch(setIsTrigger(false))
}
else
{
dispatch(setIsTrigger(true))
}
}, [isTrigger])
Here trying collapse and expand div class based isTrigger value. But its calling multiple times, how to avoid it?
Can some one please help

Answer 1

I am going to take redux out of the equation for a minute. Instead of redux lets assume you have this above the snippet you posted:
[isTrigger, setIsTrigger] = useState(false);
The effect is updating isTrigger, which is a dependency of the effect. This will cause it to go into a loop. Look below at your effect without redux:
useEffect(() => {
const element = document.querySelectorAll('some-class');
element[0].addEventListener('click',(e)=>{
if(isTrigger)
{
setIsTrigger(false)
}
else {
setIsTrigger(true)
}
}, [isTrigger]) // since its a dependency here, its going to get called everytime
// isTrigger is updated. Since your updating it in the function, you get a loop
Hope this helps explain the multiple times.
As for the solving collapse/expand, do you really need the effect? Not sure how your code looks like or your redux state(I see you are using dispatch), but a possible solution:
const isTrigger = useSelector(selectIsTrigger);
handleClick = () => {
dispatch(setIsTrigger(!isTrigger));
};
return (
... some stuff
<div click={handleClick}></div>
)
I hope this helps a little at least.
Also just a note, you should also clean up after your effect since you are adding an event listener. Effects with Cleanup. You should do this when your component unmounts. By cleaning up, you'll avoid listening to events multiple times and memory leaks.
example:
useEffect(() => {
document.addEventListener('click', handleClick);
return () => document.removeEventListener('click', handleClick);
}, [handleClick]);