search

final-form / react-final-form

🏁 High performance subscription-based form state management for React
https://final-form.org/react
MIT License
7.38k stars 480 forks source link

passing defaultValue into the React-Select Field causes infinite loop #591

Open miloxeon opened 5 years ago

miloxeon commented 5 years ago

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?

Andarist commented 5 years ago

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 commented 5 years ago

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} />

nsimonson commented 4 years ago

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 commented 4 years ago

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