From 5daa20233f12271f68219e011f8740706ef5289a Mon Sep 17 00:00:00 2001
From: "ICX\\Tatsiana.Hashtold" <tanya@form.io>
Date: Tue, 28 Jan 2025 16:32:06 +0300
Subject: [PATCH] refactored Form component code to prevent the exhaustive-deps
 error for useEffect

---
 src/components/Form.tsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index 39444c980..24aa58a21 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -270,7 +270,14 @@ export const Form = (props: FormProps) => {
 	const [formInstance, setFormInstance] = useState<Webform | null>(null);
 
 	useEffect(() => {
-		let ignore = false;
+		return () => {
+			if (formInstance) {
+				formInstance.destroy(true);
+			}
+		};
+	}, [formInstance]);
+
+	useEffect(() => {
 		const createInstance = async () => {
 			if (renderElement.current === null) {
 				console.warn('Form element not found');
@@ -290,10 +297,6 @@ export const Form = (props: FormProps) => {
 			);
 
 			if (instance) {
-				if (ignore) {
-					instance.destroy(true);
-					return;
-				}
 				if (typeof formSource === 'string') {
 					instance.src = formSource;
 				} else if (typeof formSource === 'object') {
@@ -314,13 +317,6 @@ export const Form = (props: FormProps) => {
 		};
 
 		createInstance();
-		return () => {
-			ignore = true;
-			if (formInstance) {
-				formInstance.destroy(true);
-			}
-		};
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		formConstructor,
 		formReadyCallback,