React-final-form: Using async field validator with validateFields crashes (call stack exceeded)

[TomerKr]

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

Crash (call stack exceeded) when using an async validator and validateFields={[]} on any version of react-final-form above >=5.x

What is the expected behavior?

It should not get stuck 😄

Sandbox Link

https://codesandbox.io/s/tender-jang-o2grh

WARNING: The tab gets stuck for a bit when loading the sandbox, this is the issue so that's intentional.

What's your environment?

Latest versions, see sandbox.

Other information

Works fine on 4.1

[lazurey]

Got into the same issue.
The validate methods got called infinitely until my browser crashes.

Even it's not an async validation, I can see the validate function is called all the time, my browser didn't crash only because the sync ones don't cost too much memory I think.

[tesler]

Same issue.

Here is an rewritten "Synchronous Field-Level Validation" example with this bug:
https://codesandbox.io/s/react-final-form-fieldlevel-validation-example-8l8fe?fontsize=14
Added validateFields={[]} on firstName field and console.log('render') at the start of a Form render function.

The only workaround I found is to remove all validateFields attributes.

[TomerKr]

Found a better workaround.
The problem is caused by the effect in useField in charge of registering having validateFields as one of its inputs:
https://github.com/final-form/react-final-form/blob/d4f6ca8d80ceee22dfc1d0432b4e3c3a4ec19b07/src/useField.js#L102
Using an inline validateFields={[]} actually creates a new array on each render, causing the effect to fire every time.

Declaring something like

const emptyArr = [];

Outside of the component (or as a class property or whatever, just make sure it stays the same actual object) and passing that to validateFields works fine.
A proper solution would probably be to use a ref like for the validate method.

[erikras]

Thanks guys. Great reporting.

[erikras]

Published fix in v6.0.1.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.