useForm's initializing and useField's formInitializing do not agree with each other on load

[tyteen4a03]

Describe the Bug

I don't know if this is a bug or intentional behavior, but useForm()'s initializing and useField's formInitializing do not agree with each other when the form is being loaded. This component highlights this behavior:

const TestClientField: UIFieldClientComponent = ()  => {
  const { initializing } = useForm();
  const { formInitializing } = useField({
    path: '',
  });

  if (initializing !== formInitializing) {
    console.log("initializing != formInitializing!", initializing, formInitializing);
  } else {
    console.log("initializing == formInitializing", initializing, formInitializing);
  }

  return <>test</>
}

Link to the code that reproduces this issue

https://github.com/tyteen4a03/payload-forminitializing-bug

Reproduction Steps

1. Run the repro repo.
2. Navigate to the Media collection
3. Open the Console, then refresh the page.
4. See the warning in the console: initializing != formInitializing! false true

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

Node.js v22.11.0

Binaries:
  Node: 22.11.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 9.13.0
Relevant Packages:
  payload: 3.0.0-beta.133
  next: 15.0.0
  @payloadcms/db-mongodb: 3.0.0-beta.133
  @payloadcms/email-nodemailer: 3.0.0-beta.133
  @payloadcms/graphql: 3.0.0-beta.133
  @payloadcms/next/utilities: 3.0.0-beta.133
  @payloadcms/payload-cloud: 3.0.0-beta.133
  @payloadcms/richtext-lexical: 3.0.0-beta.133
  @payloadcms/translations: 3.0.0-beta.133
  @payloadcms/ui/shared: 3.0.0-beta.133
  react: 19.0.0-rc-65a56d0e-20241020
  react-dom: 19.0.0-rc-65a56d0e-20241020
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:03:15 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10

[jessrynkar]

Hi @tyteen4a03 - I initially thought this was a bug also, but after digging a little deeper I found:

useForm().initializing finishes when the form’s global state is ready
useField().formInitializing waits for the form state to be ready and the field to finish its own setup (like permissions, conditional logic, etc.)

That’s why initializing from useForm() turns to false sooner — it doesn’t wait for all the extra field-level processes. Each field might still be setting itself up even after the form is technically initialized.

This isn't super intuitive but is expected behavior. Thanks for raising this and I hope this helps to clear things up.

[tyteen4a03]

Can this be documented in the docs? If you have client sided code for one field that interacts with another field, this behavior is problematic.

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.