what is the logic behind returning defaultFormState if form doesnt exist ?

[tomer-yechiel]

HI,
I am having an issue integrating with a custom component.
I'm not sure if it is a bug, but I do see that useControlField returns some default implementation because the form is not created.
the relevant code is in the file createFormStore.ts
why return defaultFormState instead of throwing an error?

[airjp73]

Hi!

Since the form state doesn't get created until the ValidatedForm component mounts, all consumers of that form state will necessarily mount before the form state is ready. Example: if you have an input that's a child of the form component this will happen.

• ValidatedForm renders for the first time
• Input renders for the first time
• Input useEffect runs
• ValidatedForm useEffect runs
  • Now the form store is initialized
• Input will rerender & relevant effects will rerun with the initialized form state

So if the Input threw an error before the form state was ready, that would fundamentally not work because your form would error every time.

Also important to note that, if you're using a form callback in a useEffect hook, you need to include that as a dependency to your effect for this to work correctly. This isn't explicitly documented anywhere because the default approach (and the one recommended by React itself) is to include all dependencies for an effect.

From here you might think you could solve this problem by not rendering form children until the form state is ready. Normally, that would probably work. But in our case, you can consume the form state from outside the ValidatedForm, so that doesn't fully solve the problem.

---

Speculation time:

Something that might be worth playing around with in the future is Suspense. It might theoretically be possible to suspend consumers until after the form state is initialized, but I don't think Suspense as a feature is ready for that yet. The new use hook might make this possible, but I'll need to read and understand how this works more deeply before committing to that.

Also that approach might not work for users not using JS. It probably depends on what Remix ends up doing with Server components, and what other things React supports other than promises in the use hook.

Again, this last part is just speculation.

[tomer-yechiel]

Thank you for the detailed explanation.