Programmatic validation breaks form state

[hotcholocate]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

6.4.2

Current Behavior

List of errors contains stale entries

Expected Behavior

List of errors contains correct entries for the formData and schema provided

Steps To Reproduce

1. Trigger programmatic validation in an effect.
2. Attempt to update form props.

Environment

—

Anything else?

Example 0

import Form from '@rjsf/core'
import type { RJSFSchema } from '@rjsf/utils'
import validator from '@rjsf/validator-ajv8'
import { useCallback, useEffect, useRef, useState } from 'react'

const schemaA: RJSFSchema = { type: 'string', minLength: 10 }

const schemaB: RJSFSchema = { type: 'string', minLength: 20 }

const Example0 = () => {
  const [schema, setSchema] = useState(schemaA)

  const handleClick = useCallback(() => {
    setSchema((prev) => (prev === schemaA ? schemaB : schemaA))
  }, [])

  const ref = useRef<Form>(null)

  // https://rjsf-team.github.io/react-jsonschema-form/docs/usage/validation/#validate-form-programmatically
  useEffect(() => {
    // breaks form state
    ref.current?.validateForm()

    // a hack
    // const timeout = setTimeout(() => ref.current?.validateForm(), 0)
    // return () => clearTimeout(timeout)
  }, [schema])

  return (
    <>
      <Form formData="formData" ref={ref} schema={schema} validator={validator} />
      <button onClick={handleClick}>Toggle Schema</button>
      <p>
        Schema: <output>{JSON.stringify(schema)}</output>
      </p>
    </>
  )
}

---

Example 0 demo:

Screen.Recording.2026-04-16.at.13.35.30.mov

---

Example 1

import Form from '@rjsf/core'
import type { RJSFSchema } from '@rjsf/utils'
import validator from '@rjsf/validator-ajv8'
import { useCallback, useEffect, useRef, useState } from 'react'

const schema: RJSFSchema = { type: 'string', maxLength: 11, minLength: 8 }

const valueA = 'invalid'

const valueB = 'also invalid'

const Example1 = () => {
  const [formData, setFormData] = useState(valueA)

  const handleClick = useCallback(() => {
    setFormData((prev) => (prev === valueA ? valueB : valueA))
  }, [])

  const ref = useRef<Form>(null)

  // https://rjsf-team.github.io/react-jsonschema-form/docs/usage/validation/#validate-form-programmatically
  useEffect(() => {
    // breaks form state
    ref.current?.validateForm()

    // a hack
    // const timeout = setTimeout(() => ref.current?.validateForm(), 0)
    // return () => clearTimeout(timeout)
  }, [])

  return (
    <>
      <Form formData={formData} ref={ref} schema={schema} validator={validator} />
      <button onClick={handleClick}>Toggle Data</button>
      <p>
        Data: <output>{JSON.stringify(formData)}</output>
      </p>
    </>
  )
}

[heath-freenome]

@hotcholocate Our state handling isn't quite perfect since we are using a Component class which has a delay from when props are changed to when the state update completes. Your useTimeout() workaround clearly shows this. While we plan to eventually change the Form into a functional component that hopefully cleans up the delay significantly, we don't have a specific date for the change. Since you have a work-around, I suggest continuing to use it.

[PC-Gonzales]

Ran into similar issue. I find the better workaround in my case is to do:

form.validateFormWithFormData(formData);

That way it's validating against the appropriate form data instead of whatever outdated data it was using, and I also don't have to wait for the timeout to get it.

I tried this too:

form.validate(formData, schema)

But this one still remained out of sync with state.

[iamkravishek]

Hi team! I would love to take on this issue and work on a fix.

The examples provided point to a clear race condition between React's lifecycle effects and RJSF's internal state synchronization. When schema or formData props change, the form needs to update its internal state. Calling validateForm() synchronously inside a useEffect causes the validation logic to run against stale state/closures before that synchronization settles—which is exactly why the setTimeout macro-task hack bypasses the issue.

I plan to dive into @rjsf/core to check how validateForm captures the current props/state and ensure it reliably waits for or utilizes the latest committed data.

Could you please assign this issue to me? I'll set up a local test case based on Example 0/1 and get a PR going!

[heath-freenome]

@iamkravishek I actually have a fix for it already. It's just a breaking change to the Form component so we won't be releasing it until v7