Cannot use props from outside render function scope, due to useMemo

[peeke]

I'm running into problems using the FormFieldValid component with the following setup:

function NewsletterForm({ form, formSubmitting, onSubmit }) {
  const { fields } = form

  return (
    <form {...{ onSubmit }}>
      <Fields {...{ fields }} />
      <FormFieldValid field={form} render={valid => (
        <Button 
          type="submit" 
          disabled={formSubmitting || !valid} 
          loading={formSubmitting}
        >
          Meld je aan
        </Button>
      )} />
    </form>
  )
}

In the code changes in formSubmitting are never picked up, because the render result is memoized based on the validity.

All fixes I could think of have some kind of drawback:

• Allow user to pass extra props to the FormFieldValid:

  export function FormFieldValid({ field, props = [], render }) {
  const { invalid } = useFormFieldSnapshot(field)
  return React.useMemo(() => render(!invalid, ...props) || null, [invalid, ...props])
  }

  Seems unelegant. Might be difficult if the render component return a big portion of form which uses a lot of props.

• Require user use a useCallback for render and include the render function as a memo dependency:

  export function FormFieldValid({ field, render }) {
  const { invalid } = useFormFieldSnapshot(field)
  return React.useMemo(() => render(!invalid) || null, [invalid, render])
  }

  I think this would make it impossible to render the whole form in one place, because the useCallback cannot be done inline.

• Remove the useMemo. Also suboptimal because the component would rerender a lot more often.

@EECOLOR What do you think?

[EECOLOR]

Removing the useMemo is what you want. If it was any other component it would look like this:

<Other ...
   <Button ...
     ...

So it would be rendered the same amount of times. I think the performance impact is minimal (if it's even there).

My advise: take the simple route, remove the useMemo and start the hard thoughts once you encounter a real problem.