passing defaultValue into the React-Select Field causes infinite loop

[textpain]

Current behavior

Just make the react-select adapter and try passing defaultValue to the Field – example.

What is the expected behavior?

No infinite loops.

Sandbox Link

https://codesandbox.io/s/react-final-form-react-select-lhfyf

What's your environment?

• react-final-form: 6.3.0
• final-form: 4.18.4
• react-select: 3.0.4

[Andarist]

I sort of have a fix for this or at least base for discussions around how this should get fixed, gonna post a PR once #581 gets merged in.

[harunsmrkovic]

I also reproduce this by just passing initialValue of either {} or [] to Field. Causes infinite re-render loop...

e.g. <Field name="haka" initialValue={{}} render={() => null} />

• react-final-form: 6.3.0
• final-form: 4.18.5

[nsimonson]

This is from the useEffect in useField doing a referential equality check for initialValues and defaultValues.

If it was a primitive value this would be fine. But when passing an object literal like this, it will be a new object on every render.

To work around this you can either define a constant outside the render method or, if the value is referencing a prop, use useMemo.

[nufaylr]

Hi, I'm using react-final-form: 6.3.3. still it makes an infinite loops. @nsimonson Thanks for the work around.