Move UnsavedChangesRef into common hook and clean syncing useEffect

client/homebrew/pages/editPage/editPage.jsx

@@ -78,11 +78,6 @@ const EditPage = (props)=>{
 	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
 	const saveTimeout        = useRef(null);
 	const warnUnsavedTimeout = useRef(null);
-	const unsavedChangesRef  = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges
-
-	useEffect(()=>{
-		unsavedChangesRef.current = unsavedChanges;
-	});
 
 	const handleSplitMove = ()=>{
 		editorRef.current?.update();
@@ -344,7 +339,7 @@ const EditPage = (props)=>{
 		autoSaveEnabled,
 		setAutoSaveEnabled,
 		setWarnUnsavedChanges,
-		unsavedChangesRef,
+		unsavedChanges,
 		setUnsavedChanges,
 		trySave,
 		sandbox,

client/homebrew/pages/homePage/homePage.jsx

@@ -65,11 +65,6 @@ const HomePage =(props)=>{
 	const editorRef         = useRef(null);
 	const lastSavedBrew     = useRef(_.cloneDeep(props.brew));
 	const warnUnsavedTimeout = useRef(null);
-	const unsavedChangesRef = useRef(unsavedChanges);
-
-	useEffect(()=>{
-		unsavedChangesRef.current = unsavedChanges;
-	}, [unsavedChanges]);
 
 	const save = ()=>{
 		request.post('/api')
@@ -168,7 +163,7 @@ const HomePage =(props)=>{
 		autoSaveEnabled,
 		setAutoSaveEnabled,
 		setWarnUnsavedChanges,
-		unsavedChangesRef,
+		unsavedChanges,
 		setUnsavedChanges,
 		sandbox,
 		lastSavedBrew

client/homebrew/pages/newPage/newPage.jsx

@@ -66,7 +66,6 @@ const NewPage = (props)=>{
 	const lastSavedBrew = useRef(_.cloneDeep(props.brew));
 	// const saveTimeout        = useRef(null);
 	const warnUnsavedTimeout = useRef(null);
-	const unsavedChangesRef  = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges
 
 	useEffect(()=>{
 		loadBrew();
@@ -101,10 +100,6 @@ const NewPage = (props)=>{
 			window.history.replaceState({}, window.location.title, '/new/');
 	};
 
-	useEffect(()=>{
-		unsavedChangesRef.current = unsavedChanges;
-	});
-
 	const handleSplitMove = ()=>{
 		editorRef.current.update();
 	};
@@ -222,7 +217,7 @@ const NewPage = (props)=>{
 		autoSaveEnabled,
 		setAutoSaveEnabled,
 		setWarnUnsavedChanges,
-		unsavedChangesRef,
+		unsavedChanges,
 		setUnsavedChanges,
 		trySave,
 		sandbox,

client/homebrew/utils/commonEditPageFunctions.js

@@ -24,11 +24,13 @@ export default function useCommonEditPageFunctions(dependencies) {
 		trySave = ()=>{},
 		sandbox,
 		saveGoogle = false,
-		unsavedChangesRef,
+		unsavedChanges,
 		setUnsavedChanges,
 		lastSavedBrew
 	} = dependencies;
 
+	const unsavedChangesRef  = useRef(unsavedChanges); // onBeforeUnload lives outside React and needs ref to unsavedChanges
+
 	//==--------- Page setup ----------==//
 	useEffect(()=>{
 		const autoSavePref = !sandbox && JSON.parse(localStorage.getItem(AUTOSAVE_KEY) ?? true);
@@ -63,6 +65,7 @@ export default function useCommonEditPageFunctions(dependencies) {
 	useEffect(()=>{
 		const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
 		setUnsavedChanges(hasChange);
+		unsavedChangesRef.current = hasChange;
 
 		if(autoSaveEnabled) trySave(false, hasChange, saveGoogle);
 	}, [currentBrew]);