Warn user when switching ui tab

  javascript, reactjs

There is a editor in the tab and if the user has not saved the editor content and switches to other ui tab the unsaved content is lost as the react component unmounts.

I have tried React Router Prompt and this only works when the route url changes. In my case route url doesn’t change. I have used material ui tabs.

    message="Are you sure you want to leave?"

I tried JavaScript confirm box in useEffect return function, which gets invoked before unmouting but this doesn’t stops the user from navigating. Only thing here I can do is decide if user wants to save the content or not. But can’t stop navigation.

useEffect(() => {
    return () => {
        let confirmValue = window.confirm("Do you want to save the changes?");

How do I warn the user when route doesn’t change but component does change.

Source: Ask Javascript Questions