How to remove React hook in certain conditions? - reactjs

Question

Can't find a way to remove a hook when going to the next page section.
I've created a "useMousePosition" hook that tracks mouse position and returns mouse coordinates winch I use to transform some <div/>'s position. When scrolling down the page there's no need to transform the <div/> so I want to remove this useMousePosition hook.
useMouseHook
function useMousePosition() {
let [mousePosition, setMousePosition] = useState({
x: null,
y: null
});
function handleMouseMove(e) {
setMousePosition({
x: e.pageX,
y: e.pageY
});
}
useEffect(() => {
window.addEventListener("mousemove", handleMouseMove);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
};
}, []);
return mousePosition;
}
Use hook in a component like so
let { x, y } = useMousePosition();
I need to remove a hook when user has scrolled to the next page section (Component with hook doesn't unmount)

Answer 1

The way I understood the question is that, you want to stop tracking the mouse movement.
If my understanding is correct, you can pass a flag to start/top tracking the mouse movement.
This demo shows that you can turn on/off the mouse tracking and
You can follow along
You can simply pass a variable, which you can check within your useEffect.
function useMousePosition(shouldTrack = true) {
let [mousePosition, setMousePosition] = useState({
x: null,
y: null
});
function handleMouseMove(e) {
setMousePosition({
x: e.pageX,
y: e.pageY
});
}
useEffect(() => {
if (!shouldTrack) return;
window.addEventListener("mousemove", handleMouseMove);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
};
}, [shouldTrack]);
return mousePosition;
}
function App() {
const [useMouse, setUseMouse] = useState(true);
let { x, y } = useMousePosition(useMouse);
useEffect(() => {
console.log(`x, y`, x, y);
}, [x, y]);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={() => setUseMouse(_ => !_)}>
Tracking Mouse Movement is {useMouse ? "On" : "Off"}
</button>
</div>
);
}
Clicking on the button toggles the track status.
And for "removing the hook", you can't as it's embedded in your Function Component.
You can at least prevent the "side effect" from running using a condition.
⚠ Note that useEffect has a dependency as [shouldTrack].

Answer 2

You need to specify conditions in handleMouseMove
In the next solution, you stop render outside the pink border and remove the listener under the black line.
Note: added useCallback and dep array because of unnecessary renderings.
const isInsideBox = ({ pageX, pageY }) =>
LEFT <= pageX && pageX <= RIGHT && TOP <= pageY;
function useMousePosition() {
let [mousePosition, setMousePosition] = useState({
x: null,
y: null
});
const handleMouseMove = useCallback(
e => {
isInsideBox(e) && // Add Condition for Border
setMousePosition({
x: e.pageX,
y: e.pageY
});
e.pageY >= BOTTOM && // Add Condition for Black Line
window.removeEventListener("mousemove", handleMouseMove);
},
[setMousePosition]
);
useEffect(() => {
window.addEventListener("mousemove", handleMouseMove);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
};
}, [handleMouseMove]);
return mousePosition;
}