useAppForm causes infinite re-render loop when formId changes to undefined

[JohnnyOu]

Describe the bug

In useAppForm hook, if formId is set to a state that can be undefined, changing its value from a defined string to undefined causes infinite re-render, with the following error:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

Note that if formId starts with being undefined, then this issue does not occur. It only occurs if formId changes from defined to undefined.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/lucid-satoshi-k9kj7j

Steps to reproduce

1. Visit the provided CodeSandbox link, which starts the app with undefined formId
2. Click on the button in the rendered preview to change formId to a string, seeing no issues that occur
3. Click on the button again to change formId back to undefined, now seeing error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Expected behavior

Switching formId back to undefined should not cause infinite re-rendering error. It should instead behave as if there were no formId passed into the hook in the first place.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 1.33.5

TanStack Form adapter

react-form

TanStack Form version

1.33.5

TypeScript version

5.9.3

Additional context

Current mitigation: pass formId: formId ?? "" instead. Even though this fully mitigates the issue, having this error is not a pleasant developing experience.

[amasen02]

Root Cause

In packages/react-form/src/useForm.tsx (lines 182-198), useForm keeps track of ormId changes using prevFormId state to rebuild FormApi when ormId changes:

` sx
const fallbackFormId = useFormId()
const [prevFormId, setPrevFormId] = useState(opts?.formId as never)

const [formApi, setFormApi] = useState(() => {
return new FormApi({ ...opts, formId: opts?.formId ?? fallbackFormId })
})

if (prevFormId !== opts?.formId) {
const formId = opts?.formId ?? fallbackFormId
setFormApi(new FormApi({ ...opts, formId }))
setPrevFormId(formId)
}
`

Notice what gets stored into setPrevFormId:

1. When opts?.formId is initially undefined, prevFormId starts as undefined. prevFormId !== opts?.formId evaluates undefined !== undefined (false), so no re-render happens.
2. When opts?.formId is updated to a defined string (e.g. 'my-form'), prevFormId !== opts?.formId is true (undefined !== 'my-form'). setPrevFormId('my-form') correctly updates prevFormId to 'my-form'.
3. When opts?.formId changes back to undefined, prevFormId !== opts?.formId is true ('my-form' !== undefined).
4. Inside the condition, ormId resolves to opts?.formId ?? fallbackFormId, which is allbackFormId (e.g. ':r0:').
5. Then setPrevFormId(formId) sets prevFormId to ':r0:' instead of undefined!
6. On the next render, prevFormId is ':r0:', while opts?.formId is still undefined.
7. prevFormId !== opts?.formId (':r0:' !== undefined) is true again, triggering another setFormApi and setPrevFormId during render.
8. This repeats endlessly until React throws:
   Too many re-renders. React limits the number of renders to prevent an infinite loop.

(This also explains why passing ormId ?? '' mitigated the issue: '' ?? fallbackFormId evaluates to '', so setPrevFormId and opts?.formId both remained '').

---

Suggested Fix

prevFormId needs to track the actual incoming opts?.formId prop rather than the computed ormId fallback:

`diff

• const [prevFormId, setPrevFormId] = useState(opts?.formId as never)

• const [prevFormId, setPrevFormId] = useState<string | undefined>(opts?.formId)

  const [formApi, setFormApi] = useState(() => {
  return new FormApi<
  TFormData,
  TOnMount,
  TOnChange,
  TOnChangeAsync,
  TOnBlur,
  TOnBlurAsync,
  TOnSubmit,
  TOnSubmitAsync,
  TOnDynamic,
  TOnDynamicAsync,
  TOnServer,
  TSubmitMeta

  ({ ...opts, formId: opts?.formId ?? fallbackFormId })
  })

  if (prevFormId !== opts?.formId) {
  const formId = opts?.formId ?? fallbackFormId
  setFormApi(new FormApi({ ...opts, formId }))

• setPrevFormId(formId)

• setPrevFormId(opts?.formId)
  }
  `

With setPrevFormId(opts?.formId), transitioning from 'my-form' back to undefined sets prevFormId to undefined. On the subsequent render, prevFormId === opts?.formId (undefined === undefined) is satisfied, and rendering stabilizes cleanly without loops.