An idea for hooks without nesting...

With new hooks support, accessing formState and formApi still requires you nest a custom component within your form. That’s really just reimplementing HOC behavior instead of helping to flatten react’s logic. Informed is so great because it’s so flat. But wouldn’t it be great if you could do something like this?

function CustomForm() {
  const formApi = useFormApi();

  return (
    <Form api={formApi}>
      <Select onBlur={() => formApi.submitForm()}/>
    </Form>
  );
}

At present, the closest you can do is the following, but it feels like this behavior should really be part of Informed, not a custom ref that isn’t even guaranteed to be there on first load.

function CustomForm() {
  const formApi = useRef();

  return (
    <Form getApi={(api) => {
      formApi.current = api;
    }}>
      <Select onBlur={() => formApi.current.submitForm()}/>
    </Form>
  );
}

[joepuzzo]

This is done and in latest release!!! Need to add docs but there is now a useForm hook and also a FormProvider component!!

[mikestopcontinues]

Hey @mielecmichal,

setState immediately triggers a re-render. In the case of formState, that’ll work most of the time. Unless you do something like—useEffect(() => changeInput(), [formState])—to trigger infinite renders. But in the case of useState() for formApi, I ran into a similar loop. It’s possible I could have avoided it with useCallback() with <Form getApi={callback}/>, but I can’t remember what I tested when I chose to go with useRef(). But if what you’re doing works, that’s all that matters!