diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx
index c4c9a8a..025f28a 100644
--- a/frontend/src/components/NumberComponent.tsx
+++ b/frontend/src/components/NumberComponent.tsx
@@ -109,16 +109,6 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
   useEffect(() => {
     renderCount.current++;
 
-    // Parse the input string to a number for comparison
-    const numericInputString =
-      props.type === 'int' ? parseInt(inputString) : parseFloat(inputString);
-
-    // Update inputString only when value is different from numericInputString
-    // preventing the removal of trailing decimals or zeros after the decimal.
-    if (isInstantUpdate && props.value !== numericInputString) {
-      setInputString(props.value.toString());
-    }
-
     // Set the cursor position after the component re-renders
     const inputElement = document.getElementsByName(
       parent_path.concat(name)
@@ -128,6 +118,16 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
     }
   });
 
+  useEffect(() => {
+    // Parse the input string to a number for comparison
+    const numericInputString =
+      props.type === 'int' ? parseInt(inputString) : parseFloat(inputString);
+    // Only update the inputString if it's different from the prop value
+    if (props.value !== numericInputString) {
+      setInputString(props.value.toString());
+    }
+  }, [props.value]);
+
   const handleNumericKey = (key: string, value: string, selectionStart: number) => {
     // Check if a number key or a decimal point key is pressed
     if (key === '.' && (value.includes('.') || props.type === 'int')) {
diff --git a/frontend/src/components/StringComponent.tsx b/frontend/src/components/StringComponent.tsx
index 2e7b0b2..3b39bb5 100644
--- a/frontend/src/components/StringComponent.tsx
+++ b/frontend/src/components/StringComponent.tsx
@@ -21,10 +21,14 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
   const { name, parent_path, readOnly, docString, isInstantUpdate } = props;
   useEffect(() => {
     renderCount.current++;
-    if (isInstantUpdate && props.value !== inputString) {
+  }, [isInstantUpdate, inputString, renderCount]);
+
+  useEffect(() => {
+    // Only update the inputString if it's different from the prop value
+    if (props.value !== inputString) {
       setInputString(props.value);
     }
-  }, [isInstantUpdate, props.value, inputString, renderCount]);
+  }, [props.value]);
 
   const handleChange = (event) => {
     setInputString(event.target.value);