Correct way to intercept back button with Inertia (+ React)

Update: I also tried two more approaches which did not work satisfactorily.

1. Appending a random hash to the URL on every relevant state change and intercepting onhashchange.

useEffect(()=>{
	//Random hash adds "#somerandomcharacters" to the URL.
	history.pushState('','',randomHash());
},[currentQuestion]);

useEffect(()=>{
	window.addEventListener((event)=>{
	//I tried a bunch of variations of what to do here.
	event.preventDefault();
	return confirm("Are you sure you want to navigate away?");
});
},[]);

This resulted in the back button reloading the beginning of the form, rather than going back to the previous page, but still discarding all state/progress.

1. Using history.pushState to track the state.

useEffect(()=>{
	history.pushState({'currentQuestion':currentQuestion},'','');
},[currentQuestion]);

Same result as above.

I've come up with a solution to this where I write the state of the form to local storage, then restore the state from the data in local storage (if any) when the form is loaded. This makes it so that the fact that popstate fires after the page has been unloaded doesn't matter, because I can instantly restore the previous state of the form anyway.

    const formId = usePage().props.id;

    useEffect(() => {
        if (window.localStorage.getItem(formId) !== null) {
            let previous = window.localStorage.getItem(formId);
            previous = JSON.parse(previous);
            setCurrentQuestion(previous.currentQuestion);
            setChosenAnswers(previous.chosenAnswers);
        }
    }, []);

    useEffect(() => {
        const formdata= {
            'currentQuestion': currentQuestion,
            'chosenAnswers':chosenAnswers
        }
        window.localStorage.setItem(formId, JSON.stringify(formdata));
    }, [currentQuestion]);

    useEffect(() => {
        window.onpopstate = () => {
			/*This can obviously be replaced with logic prompting to user confirm if they actually want to go back or not.*/
            history.forward();
        }
    }, []);

Advantages:

• Not only does this deal with intercepting the back button, this also saves the state of the form in case the browser closes unexpectedly.
• This could be easily extended to save the state to the user's session on the server to preserve their progress across browsers/devices.

Disadvantages:

• As I've written it, this makes the code more brittle, since any additional piece of state added to the form also has to be manually added here. The order in which this code is called also matters (in that it has to come after all the state it depends on has been declared).

Please let me know if there's anything I haven't thought of with this, or if you have a better way of approaching this problem.

I need to save data when the user left input fields, but wanted to also save the data if they chose to close the window or hit the back button. After adding the save function to each input statement on blur, I added the following useEffect. This worked great for me. Hope it helps.

// added to input
onBlur={event => handleSave()}

// useEffect to catch closing page or hitting backbutton
useEffect(() => {
        window.onbeforeunload = () => {
            document.activeElement.blur()
        }
        window.addEventListener("popstate", (event) => {
            document.activeElement.blur()
        })
}, [])