I am currently utilizing Material-UI's ClickAwayListener in conjunction with react-router for my application. The issue I have come across involves the callback function of the ClickAwayListener being interrupted midway to allow a useEffect to run, only to then resume execution afterwards. This behavior is unexpected for a callback function and it should ideally be completed before the useEffect is triggered. Below is the code snippet I have created to showcase this problem and you can view the demo here
import React, { useEffect, useState } from "react";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useHistory,
useParams
} from "react-router-dom";
export default function BasicExample() {
return (
<Router>
<div>
<Switch>
<Route exact path="/">
<ButtonPage />
</Route>
{/*Main focus route here*/ }
<Route path="/:routeId">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
// Main focus here
function Home() {
const history = useHistory();
const { routeId } = useParams();
const [count, setCount] = useState(0);
const handleClick1 = () => {
history.push("/route1");
};
const handleClick2 = () => {
history.push("/route2");
};
// useEffect run on re-render and re-mount
useEffect(() => {
console.log("Re-render or remount");
});
useEffect(() => {
console.log("Run on route change from inside useEffect");
}, [routeId]);
const handleClickAway = () => {
console.log("First line in handle click away");
setCount(count + 1);
console.log("Second line in handle click away");
};
return (
<div>
<button onClick={handleClick1}>Route 1 </button>
<button onClick={handleClick2}>Route 2 </button>
<ClickAwayListener onClickAway={handleClickAway}>
<div style={{ height: 100, width: 100, backgroundColor: "green" }}>
Hello here
</div>
</ClickAwayListener>
</div>
);
}
// Just a component such that home route can navigate
// Not important for question
function ButtonPage() {
const history = useHistory();
const handleClick1 = () => {
history.push("/route1");
};
const handleClick2 = () => {
history.push("/route2");
};
return (
<div>
<button onClick={handleClick1}>Route 1 </button>
<button onClick={handleClick2}>Route 2 </button>
</div>
);
}Specifically, when I click outside the ClickAwayListener, the handleClickAway behaves as expected, with the following logging message:
First line in handle click away
Second line in handle click away
Re-render or remount
However, if I choose to click on a button that navigates to another route, a strange scenario unfolds: handleClickAway stops at the first logging line, allowing the useEffect to run its logging, before eventually resuming where it left off. Here is the logging sequence in this case:
First line in handle click away
Re-render or remount
Run on route change from inside useEffect
Second line in handle click away
Through various testing, I have determined that the presence of setCount within the handleClickAway function is what triggers this unexpected behavior. Removing this line ensures that handleClickAway functions correctly in all scenarios. It seems that modifying the component state, causing a rerender, within handleClickAway alongside route navigation can lead to this bug.
This behavior is puzzling, given that traditional callbacks are not supposed to halt midway through execution like this. My theory is that the ClickAwayListener may somehow convert handleClickAway into a Promise, though even then, it does not justify pausing at the setCount step to allow useEffect to intervene. Can anyone provide insight into this phenomenon?
Edit 1: Upon reviewing @Rex Pan's response, it appears that the handleClickAway may contain an embedded useEffect. This deduction stems from analyzing the trace stack. However, this peculiar behavior solely manifests when navigating to a different route by clicking on a link. Clicking elsewhere does not trigger this anomaly. Can someone shed light on why and how this occurs?
Edit 2: Building upon @Rex Pan's explanation, further investigation reveals that his reasoning applies specifically to the ClickAwayListener callback. Consequently, the code snippet below showcases a similar "bug" occurring:
export default function ClickAway() {
const classes = useStyles();
const [count, setCount] = React.useState(0);
useEffect(() => {
console.log("Test in useEffect");
});
const handleClickAway = () => {
console.log("Count is " + count);
setCount(count + 1);
setCount(count + 10);
console.log("Count is " + count);
};
return (
<ClickAwayListener onClickAway={handleClickAway}>
<div className={classes.root}>Click away</div>
</ClickAwayListener>
);
}
Interestingly, this explanation does not apply universally, as evidenced by the following code snippet:
export default function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Run inside useEffect");
});
const handleClick = () => {
console.log("First line");
setCount(count + 1);
console.log("Second line");
setCount(count + 100);
console.log("Third line");
};
return (
<>
<div>Count is: {count} </div>
<button onClick={handleClick}>Click</button>
</>
);
}
I have attempted to dig into the source code of ClickAwayListner but so far, I have been unable to pinpoint the specific location responsible for this behavior. Any insights would be greatly appreciated.