Is there a function, like componentWillUnmount, that will fire before the page is refreshed

by

You could try listening for the window.beforeunload event.

The beforeunload event is fired when the window, the document and its
resources are about to be unloaded. The document is still visible and
the event is still cancelable at this point.

useEffect(() => {
  const unloadCallback = (event) => { ... };

  window.addEventListener("beforeunload", unloadCallback);
  return () => window.removeEventListener("beforeunload", unloadCallback);
}, []);

Note: This will respond to anything that causes the page to unload though.

Note 2:

However note that not all browsers support this method, and some
instead require the event handler to implement one of two legacy
methods:

  • assigning a string to the event’s returnValue property
  • returning a string from the event handler.

More Related Contents:

  1. Understanding unique keys for array children in React.js
  2. What do these three dots in React do?
  3. Arrow function without curly braces
  4. Show or hide element in React
  5. How to set focus on an input field after rendering?
  6. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  7. react router v6 navigate outside of components
  8. Problem in redirecting programmatically to a route in react router v6
  9. React – changing an uncontrolled input
  10. Reactjs setState() with a dynamic key name?
  11. What does npm install –legacy-peer-deps do exactly? When is it recommended / What’s a potential use case?
  12. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  13. How can I update state.item[1] in state using setState?
  14. ReactJS – .JS vs .JSX
  15. TypeError: Cannot read property ‘setState’ of undefined
  16. Is this the correct way to delete an item using redux?
  17. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
  18. Active link with React-Router?
  19. reactjs this.refs vs document.getElementById
  20. Cleaner/shorter way to update nested state in Redux?
  21. How to make Puppeteer work with a ReactJS application on the client-side
  22. React js change child component’s state from parent component
  23. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  24. React-router: How to manually invoke Link?
  25. children prop in React component
  26. Simulate click event on react element
  27. Is it possible to use dotenv in a react project?
  28. having multiple instance of same reusable redux react components on the same page/route
  29. Electron IPC and nodeIntegration
  30. add raw HTML with inside Gatsby React page

Leave a Comment