EventListener wont invoke callback method when reffered by name

Question

I'm working on a React application and I'm trying to listen to back button click events so I can customize the navigation flow. I've created the following hook:

export default function useBackButton(
  goTo: string,
) {
  const navigate = useNavigate();
  useEffect(() => {
    window.history.pushState(null, "", document.URL);
    window.addEventListener("popstate", backButtonHandler);
    return () => window.removeEventListener("popstate", backButtonHandler);
  });
  function backButtonHandler(event) {
      navigate(goTo, { replace: true });
    }
  }

The problem with the code is that the callback method "backButtonHandler" in ...

window.addEventListener("popstate", backButtonHandler);

... will not be invoked.

It will only work if I add it as inline logic:

 window.addEventListener("popstate", (event) => navigate(goTo, { replace: true });

I my case I need to provide the logic through a method declaration since I need to remove the listener.

Thanks in advance.

Don't change the browser back button behavior to "trap" users inside your web page/app, it's poor UI/UX. — Drew Reese, Apr 02 '23 at 20:37

krirkrirk · Answer 1 · 2023-04-02T02:36:03.400

1

You're forgetting a dependency array in your useEffect. This leads the event listener to be added and removed on each render. Just add an empty array as a dependency.

edited Apr 02 '23 at 02:36

answered Apr 02 '23 at 02:33

krirkrirk

427
1
3
8

thanks..but adding the empty array as dependecy didn't help, dosen't still invoke. – arif Apr 02 '23 at 11:19

score 0 · Answer 2 · answered Apr 02 '23 at 02:30

If you need to listen to back button events you can create a function like this:

 const BackButtonListener = ({ children }) => {
  const [pressed, setPressed] = React.useState(false)
  React.useEffect(() => {
    window.onpopstate = e => {
      setPressed(true)
    };
  });
 return (
    <h3>Back button: {pressed.toString()}</h3>
  );
};

Then, include the same in your component as follows:

export default function App() {
  return (
    <Router>
      <div>
        ...
        <BackButtonListener />
        ...
      </div>
    </Router>
  );
}

Reference link: Intercept/handle browser's back button in React-router

EventListener wont invoke callback method when reffered by name

2 Answers2