React-final-form: passing defaultValue into the React-Select Field causes infinite loop
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.0final-form: 4.18.4react-select: 3.0.4
mvoloskov
All 4 comments
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.
Andarist
on 13 Aug 2019
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.0final-form: 4.18.5
harunsmrkovic
on 19 Aug 2019
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.
nsimonson
on 30 Oct 2019
Hi, I'm using react-final-form: 6.3.3. still it makes an infinite loops. @nsimonson Thanks for the work around.
nufaylr
on 5 Jan 2020
Related issues
tpbowden
·
4Comments
LucienBouletRoblin
·
3Comments
dawidcxx
·
4Comments
kavink
·
5Comments
Soundvessel
·
4Comments
Most helpful comment
This is from the
useEffectinuseFielddoing a referential equality check forinitialValuesanddefaultValues.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.