elimina el async set state

Author: nicolaslopezj

src/Form/index.test.tsx

@@ -198,3 +198,51 @@ test('passes dom props to the form element', () => {
 
   expect(container.querySelector('form').getAttribute('target')).toBe('/submit-here')
 })
+
+test('resetState race condition: isUpdatingFromField.current blocks state reset', async () => {
+  let form: FormRef = null
+  const setState = jest.fn()
+
+  const {container, rerender} = render(
+    <Form
+      ref={handle => {
+        form = handle
+      }}
+      state={{name: 'initial'}}
+      onChange={setState}
+    >
+      <Field fieldName="name" type={DummyInput} />
+    </Form>,
+  )
+
+  // First, change the field value (this sets isUpdatingFromField.current = true)
+  act(() => {
+    fireEvent.change(container.querySelector('input'), {target: {value: 'changed'}})
+  })
+
+  // Verify the change happened
+  expect(form.getValue()).toEqual({name: 'changed'})
+
+  // Now simulate parent component updating props.state by rerendering with new state
+  // This triggers the useDeepCompareEffect which calls resetState
+  // However, resetState is blocked by isUpdatingFromField.current still being true
+  act(() => {
+    // to make sure all hooks and effects are executed
+    rerender(
+      <Form
+        ref={handle => {
+          form = handle
+        }}
+        state={{name: 'external'}}
+        onChange={setState}
+      >
+        <Field fieldName="name" type={DummyInput} />
+      </Form>,
+    )
+  })
+
+  // The state should be reset to {name: 'external'} from the new props.state
+  // Currently this test will FAIL because of a race condition bug where
+  // isUpdatingFromField.current prevents resetState from executing
+  expect(form.getValue()).toEqual({name: 'external'})
+})

src/Form/index.tsx

@@ -27,18 +27,12 @@ function Form(props: FormProps, ref: React.Ref<FormRef>) {
   const propsState = useMemo(() => cloneDeep(props.state || {}), [props.state])
   const [state, setState] = useState(propsState)
 
-  // Track if changes are coming from internal field updates
-  const isUpdatingFromField = useRef(false)
-
   const resetState = useCallback(() => {
     if (isEqual(propsState, state)) return
-    // Only reset if we're not currently processing a field update
-    if (!isUpdatingFromField.current) {
-      // Use startTransition for form resets as they're typically not urgent
-      startTransition(() => {
-        setState(propsState)
-      })
-    }
+    // Always allow reset, but use startTransition for async behavior
+    startTransition(() => {
+      setState(propsState)
+    })
   }, [propsState, state])
 
   // when the props state changes, we set the state to the new props.state
@@ -73,14 +67,8 @@ function Form(props: FormProps, ref: React.Ref<FormRef>) {
   }, [state, props.onChange, propsState])
 
   const onChange = useCallback((fieldName: string, fieldValue: any) => {
-    isUpdatingFromField.current = true
     setState(oldValue => {
-      const newValue = getNewValue(oldValue, fieldName, fieldValue)
-      // Reset the flag after state update
-      Promise.resolve().then(() => {
-        isUpdatingFromField.current = false
-      })
-      return newValue
+      return getNewValue(oldValue, fieldName, fieldValue)
     })
   }, [])