$'syncing commit from monorepo. PR: 394, Title: FIO-9944: Fixes a memory leak where create form promise fullfills only after original component got unmount'

Author: brendanbond

src/components/Form.tsx

@@ -268,6 +268,7 @@ export const Form = (props: FormProps) => {
 		...handlers
 	} = props;
 	const [formInstance, setFormInstance] = useState<Webform | null>(null);
+	const isMounted = useRef(false);
 
 	useEffect(() => {
 		return () => {
@@ -277,6 +278,13 @@ export const Form = (props: FormProps) => {
 		};
 	}, [formInstance]);
 
+	useEffect(() => {
+		isMounted.current = true;
+		return () => {
+			isMounted.current = false;
+		}
+	}, []);
+
 	useEffect(() => {
 		if (
 			typeof formSource === 'object' &&
@@ -308,6 +316,10 @@ export const Form = (props: FormProps) => {
 			);
 
 			if (instance) {
+				if (!isMounted.current) {
+					instance.destroy(true);
+					return;
+				}
 				if (typeof formSource === 'string') {
 					instance.src = formSource;
 				} else if (typeof formSource === 'object') {
@@ -321,7 +333,7 @@ export const Form = (props: FormProps) => {
 				if (formReadyCallback) {
 					formReadyCallback(instance);
 				}
-				setFormInstance((prevInstance: any) => {
+				setFormInstance((prevInstance) => {
 					if (prevInstance) {
 						prevInstance.destroy(true);
 					}
@@ -333,14 +345,7 @@ export const Form = (props: FormProps) => {
 		};
 
 		createInstance();
-	}, [
-		formConstructor,
-		formReadyCallback,
-		formSource,
-		options,
-		url,
-		submission,
-	]);
+	}, [formConstructor, formReadyCallback, formSource, options, url]);
 
 	useEffect(() => {
 		let onAnyHandler = null;
@@ -359,7 +364,9 @@ export const Form = (props: FormProps) => {
 
 	useEffect(() => {
 		if (formInstance && submission) {
-			formInstance.submission = submission;
+			if (!Utils._.isEqual(formInstance.submission, submission)) {
+				formInstance.submission = submission;
+			}
 		}
 	}, [formInstance, submission]);