[Docs question] useForm

[adrienharnay]

Are you submitting a bug report or a feature request?

Question about the documentation

What is the current behavior?

The doc states:

The useForm hook plucks the FormApi out of the React context for you. It will throw an exception if you try to use it outside of a <Form> component.

Which confused me at first, because what would be the use of useForm if you still needed Form?

Then I found this Codesandbox: https://codesandbox.io/s/zqkj5706y3, which doesn't use Form.

I think the doc should be updated, and I would gladly do it but maybe I'm mistaken, or maybe there was some intent behind the original description?

Thanks in advance for looking into it!

[adrienharnay]

Ah, I've just figured you are using react-final-form-hooks in the sandbox: https://github.com/final-form/react-final-form-hooks#whats-the-difference-between-react-final-form-hooks-and-the-hooks-introduced-in-react-final-form-v5, though I did not completely understand why RFF's useForm couldn't be like RFF-hooks'.

[checkmatez]

That threw me off too. I would expect useForm hook to eliminate the need for Form component.

[venelin-mihaylov]

This is truly confusing. Please provide useForm() that does not need an Form component.

[adrienharnay]

@venelin-mihaylov "please provide"? You do know this project is not maintained by Jesus right? But rather by someone just like you and me who decides to give away spare time for free every week to maintain this project.

[checkmatez]

As I see it, with React hooks we don't need to render components, unless we want something on the screen. Hooks allows us to reuse stateful logic between "presentational" components. Since Final Form does not have an opinion on visual side of things, it should be possible to use library simply as a collection of hooks.

I think that useForm hook was introduced as a way to consume api of the closest form - analogous children as a function inside <Form>. I propose a new hook useFinalForm - that would have api similar to the <Form> itself.

So usage would look something like:

const MyForm = () => {
  const { ContextProvider, formInstance, handleSubmit, /* rest of FormRenderProps */} = useFinalForm({ onSubmit: () => {...}, /* rest of FormProps */ })
  return <ContextProvider value={formInstance}><form onSubmit={handleSubmit}>{ /* ... */ }</form></ContextProvider>
}

What do you think, @erikras ?