Put A Warning If Page Refresh in ReactJS

by

If you want to display a sort of confirmation before leaving the page then follow the beforeunload event guidelines

According to the specification, to show the confirmation dialog an
event handler should call preventDefault() on the event.

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.

To combat unwanted pop-ups, browsers may not display prompts created
in beforeunload event handlers unless the page has been interacted
with, or may even not display them at all.

The HTML specification states that calls to window.alert(),
window.confirm(), and window.prompt() methods may be ignored during
this event. See the HTML specification for more details.

I just tested this in chrome and safari and it works. I don’t have a windows box, but this should cover most cases.

useEffect(() => {
  const unloadCallback = (event) => {
    event.preventDefault();
    event.returnValue = "";
    return "";
  };

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

enter image description here
enter image description here

Edit put-a-warning-if-page-refresh-in-reactjs

More Related Contents:

  1. What is the expected return of `useEffect` used for?
  2. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  3. How to fix missing dependency warning when using useEffect React Hook
  4. Uncaught TypeError: Cannot read property ‘state or props’ of undefined
  5. Dynamically import images from a directory using webpack
  6. How to compare oldValues and newValues on React Hooks useEffect?
  7. Does React batch state update functions when using hooks?
  8. How to use callback with useState hook in react [duplicate]
  9. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  10. With useEffect, how can I skip applying an effect upon the initial render?
  11. How to use throttle or debounce with React Hook?
  12. React Hook : Send data from child to parent component
  13. Differences between creating a new class to using export const
  14. Why React Hook useState uses const and not let
  15. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  16. Set types on useState React Hook with TypeScript
  17. Stop useEffect from running on mount
  18. How to sync props to state using React hooks : setState()
  19. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  20. React: Which is recommended arrow or normal function?
  21. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  22. React: useState or useRef?
  23. Lazy initial state – What it is and how to use it?
  24. React Hooks – Modified state not reflecting immediately
  25. React Hooks – Modified state not reflecting immediately
  26. React Hooks: Why is .current null for useRef Hook?
  27. React – Is useState ‘s setter function able to change?
  28. Which react hook to use with firestore onsnapshot?
  29. How do I window removeEventListener using React useEffect
  30. React Hook useEffect has a missing dependency: ‘list’

Leave a Comment