React/Redux Multiple referrals are carried out with a single click - reactjs

Question

When I add const serverTime = useSelector(state => state.serverTime);, when I click once, dispatch occurs multiple times. But this problem disappears when I remove the const serverTime = useSelector(state => state.serverTime); code. What would be the reason? What am I doing wrong?
Component.js
import { useSelector, useDispatch } from "react-redux";
const Buy = () => {
const dispatch = useDispatch();
const serverTime = useSelector(state => state.serverTime);
document.body.addEventListener("click", function() {
dispatch(SERVER_TIME(Date.now()))
})
return (
<main>
...
</main>
)
}
Action.js
export const SERVER_TIME = (serverTime) => ({
type: "SERVER_TIME",
serverTime: serverTime
})
Reducer.js
let initialState = {
serverTime: ""
}
const serverTime = (state = initialState, action) => {
switch (action.type) {
case "SERVER_TIME":
return {
...state,
serverTime: action.serverTime
}
default:
return state
}
}
export default serverTime;

Answer 1

The problem is not really the serverTime, although that is triggering the problem. The real problem is how you are setting up your event listener.
In your Buy component, you are adding an event listener every time the component is updated rather than just once. As a result, whenever state changes (like whenever you update the server time), react will add another event listener. To only add one event listener, you should wrap it in useEffect inside of your Buy component.
The first argument to useEffect is a function to run on first render, and the second argument is an array of dependencies that will trigger reruns of that function when those dependencies change. In your case, since you only want this to run once, you can use an empty array so that nothing will trigger a rerun.
The function argument in useEffect can also return a function, which will be used to "clean up" when your component is unmounted. This is useful for unsubscribing to event listeners. So for example:
useEffect( () => {
// Define what should happen on click.
function onClickStuff(){
dispatch(SERVER_TIME(Date.now()))
}
// Add the event listener to the document.
document.body.addEventListener("click", onClickStuff)
return () => {
// Remove the event listener on unmount.
document.body.removeEventListner("click", onClickStuff)
}
}, [] /* No dependencies, so useEffect will only run once. */ )