How to set a leaving warning with react hooks?

Question

I'm making a application that needs to show the progress will be lost if you hit back.

I did use the useEffect hook:

 useEffect(() => {
        return () => {
          showWarning();
        }
  }, [])

which function can I use to stop this back action so I can show my warning and confirm?

Answer 1

If you are using the react-router, you have Prompt to handle this kind of behavior. You have more information here: https://reactrouter.com/core/api/Prompt

Answer 2

"which function can I use to stop this back action" if you mean you are looking to stop the browser from completing its operation then that is not the way to design apps, useEffect with return statement is used for clean up work and not for mounting another component or showing messages

you can instead to use the onbeforeunload event and clean up the handler on unmount of the app, but it will show you a popup with default message that cannot be changed

 useEffect(() => {
   function showWarning() {
     return '';
   }

   window.addEventListener('beforeunload', showWarning);

   return () => {
      window.removeEventListener('beforeunload', showWarning);
   }
 })